Page

Vue 2

Options API

CSS Modules

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div :class="$style.page">
    <header :class="$style.header">
      <h2 :class="$style.title">ResourceName</h2>
 
      <button @click="greeting" :class="$style.action">Action</button>
    </header>
 
    <main :class="$style.content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped module>
.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 40px;
}
 
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
 
.title {
  color: #333;
  font-size: x-large;
}
 
.content {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
</style>

Unstyled

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div>
    <header>
      <h2>ResourceName</h2>
 
      <button @click="greeting">Action</button>
    </header>
 
    <main>
      <p>{{ message }}</p>
    </main>
  </div>
</template>

CSS

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div class="page">
    <header class="header">
      <h2 class="title">ResourceName</h2>
 
      <button @click="greeting" class="action">Action</button>
    </header>
 
    <main class="content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped>
.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 40px;
}
 
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
 
.title {
  color: #333;
  font-size: x-large;
}
 
.content {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
</style>

SCSS

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div class="page">
    <header class="header">
      <h2 class="title">ResourceName</h2>
 
      <button @click="greeting" class="action">Action</button>
    </header>
 
    <main class="content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped lang="scss">
.page,
.header,
.content {
  display: flex;
}
 
.header,
.content {
  align-items: center;
  align-content: center;
}
 
.page {
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 40px;
 
  .header {
    flex-direction: row;
    justify-content: space-between;
 
    .title {
      color: #333;
      font-size: x-large;
    }
 
    .action {
      color: #fff;
      background-color: #1c77f7;
 
      padding: 4px 8px;
      border-radius: 8px;
 
      &:hover {
        background-color: #0758c9;
      }
    }
  }
 
  .content {
    justify-content: center;
  }
}
</style>

Tailwind Inline

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div class="flex flex-col justify-start py-5 px-10">
    <header class="flex flex-row justify-between items-center content-center">
      <h2 class="text-slate-800 text-xl">ResourceName</h2>
 
      <button @click="greeting" class="text-white bg-sky-500 hover:bg-sky-700 py-1 px-2 rounded-lg">
        Action
      </button>
    </header>
 
    <main class="flex justify-center items-center content-center">
      <p>{{ message }}</p>
    </main>
  </div>
</template>

Tailwind

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div class="page">
    <header class="header">
      <h2 class="title">ResourceName</h2>
 
      <button @click="greeting" class="action">Action</button>
    </header>
 
    <main class="content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped>
.page {
  @apply flex flex-col justify-start;
  @apply py-5 px-10;
}
 
.header {
  @apply flex flex-row justify-between items-center content-center;
}
 
.title {
  @apply text-slate-800 text-xl;
}
 
.content {
  @apply flex justify-center items-center content-center;
}
 
.action {
  @apply text-white bg-sky-500;
  @apply hover:bg-sky-700;
  @apply py-1 px-2;
  @apply rounded-lg;
}
</style>

Vue 3

Options API

CSS Modules

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div :class="$style.page">
    <header :class="$style.header">
      <h2 :class="$style.title">ResourceName</h2>
 
      <button @click="greeting" :class="$style.action">Action</button>
    </header>
 
    <main :class="$style.content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped module>
.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 40px;
}
 
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
 
.title {
  color: #333;
  font-size: x-large;
}
 
.content {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
</style>

Unstyled

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  props: {},
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div>
    <header>
      <h2>ResourceName</h2>
 
      <button @click="greeting">Action</button>
    </header>
 
    <main>
      <p>{{ message }}</p>
    </main>
  </div>
</template>

CSS

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  props: {},
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div class="page">
    <header class="header">
      <h2 class="title">ResourceName</h2>
 
      <button @click="greeting" class="action">Action</button>
    </header>
 
    <main class="content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped>
.page,
.header,
.content {
  display: flex;
}
 
.header,
.content {
  align-items: center;
  align-content: center;
}
 
.page {
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 40px;
}
 
.header {
  flex-direction: row;
  justify-content: space-between;
}
 
.content {
  justify-content: center;
}
 
.title {
  color: #333;
  font-size: x-large;
}
 
.action {
  color: #fff;
  background-color: #1c77f7;
 
  padding: 4px 8px;
  border-radius: 8px;
}
 
.action:hover {
  background-color: #0758c9;
}
</style>

SCSS

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  props: {},
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div class="page">
    <header class="header">
      <h2 class="title">ResourceName</h2>
 
      <button @click="greeting" class="action">Action</button>
    </header>
 
    <main class="content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped lang="scss">
.page,
.header,
.content {
  display: flex;
}
 
.header,
.content {
  align-items: center;
  align-content: center;
}
 
.page {
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 40px;
 
  .header {
    flex-direction: row;
    justify-content: space-between;
 
    .title {
      color: #333;
      font-size: x-large;
    }
 
    .action {
      color: #fff;
      background-color: #1c77f7;
 
      padding: 4px 8px;
      border-radius: 8px;
 
      &:hover {
        background-color: #0758c9;
      }
    }
  }
 
  .content {
    justify-content: center;
  }
}
</style>

Tailwind Inline

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div class="flex flex-col justify-start py-5 px-10">
    <header class="flex flex-row justify-between items-center content-center">
      <h2 class="text-slate-800 text-xl">ResourceName</h2>
 
      <button @click="greeting" class="text-white bg-sky-500 hover:bg-sky-700 py-1 px-2 rounded-lg">
        Action
      </button>
    </header>
 
    <main class="flex justify-center items-center content-center">
      <p>{{ message }}</p>
    </main>
  </div>
</template>

Tailwind

<script>
export default {
  name: 'ResourceName',
  data() {
    return {
      message: "Hello, I'm a resource auto generated by Clingon CLI!"
    }
  },
  methods: {
    greeting() {
      alert(this.message)
    }
  }
}
</script>
 
<template>
  <div class="page">
    <header class="header">
      <h2 class="title">ResourceName</h2>
 
      <button @click="greeting" class="action">Action</button>
    </header>
 
    <main class="content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped>
.page {
  @apply flex flex-col justify-start;
  @apply py-5 px-10;
}
 
.header {
  @apply flex flex-row justify-between items-center content-center;
}
 
.title {
  @apply text-slate-800 text-xl;
}
 
.content {
  @apply flex justify-center items-center content-center;
}
 
.action {
  @apply text-white bg-sky-500;
  @apply hover:bg-sky-700;
  @apply py-1 px-2;
  @apply rounded-lg;
}
</style>

Composition API

Css Modules

<script setup>
// * Data *
 
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
 
// * Methods *
 
function greeting() {
  alert(this.message)
}
</script>
 
<template>
  <div :class="$style.page">
    <header :class="$style.header">
      <h2 :class="$style.title">ResourceName</h2>
 
      <button @click="greeting" :class="$style.action">Action</button>
    </header>
 
    <main :class="$style.content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped module>
.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 40px;
}
 
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
 
.title {
  color: #333;
  font-size: x-large;
}
 
.content {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
</style>

Unstyled

<script setup>
// * Data *
 
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
 
// * Methods *
 
function greeting() {
  alert(this.message)
}
</script>
 
<template>
  <div>
    <header>
      <h2>ResourceName</h2>
 
      <button @click="greeting">Action</button>
    </header>
 
    <main>
      <p>{{ message }}</p>
    </main>
  </div>
</template>

CSS

<script setup>
// * Data *
 
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
 
// * Methods *
 
function greeting() {
  alert(this.message)
}
</script>
 
<template>
  <div class="page">
    <header class="header">
      <h2 class="title">ResourceName</h2>
 
      <button @click="greeting" class="action">Action</button>
    </header>
 
    <main class="content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped>
.page,
.header,
.content {
  display: flex;
}
 
.header,
.content {
  align-items: center;
  align-content: center;
}
 
.page {
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 40px;
}
 
.header {
  flex-direction: row;
  justify-content: space-between;
}
 
.content {
  justify-content: center;
}
 
.title {
  color: #333;
  font-size: x-large;
}
 
.action {
  color: #fff;
  background-color: #1c77f7;
 
  padding: 4px 8px;
  border-radius: 8px;
}
 
.action:hover {
  background-color: #0758c9;
}
</style>

SCSS

<script setup>
// * Data *
 
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
 
// * Methods *
 
function greeting() {
  alert(this.message)
}
</script>
 
<template>
  <div class="page">
    <header class="header">
      <h2 class="title">ResourceName</h2>
 
      <button @click="greeting" class="action">Action</button>
    </header>
 
    <main class="content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped lang="scss">
.page,
.header,
.content {
  display: flex;
}
 
.header,
.content {
  align-items: center;
  align-content: center;
}
 
.page {
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 40px;
 
  .header {
    flex-direction: row;
    justify-content: space-between;
 
    .title {
      color: #333;
      font-size: x-large;
    }
 
    .action {
      color: #fff;
      background-color: #1c77f7;
 
      padding: 4px 8px;
      border-radius: 8px;
 
      &:hover {
        background-color: #0758c9;
      }
    }
  }
 
  .content {
    justify-content: center;
  }
}
</style>

Tailwind Inline

<script setup>
// * Data *
 
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
 
// * Methods *
 
function greeting() {
  alert(this.message)
}
</script>
 
<template>
  <div class="flex flex-col justify-start py-5 px-10">
    <header class="flex flex-row justify-between items-center content-center">
      <h2 class="text-slate-800 text-xl">ResourceName</h2>
 
      <button @click="greeting" class="text-white bg-sky-500 hover:bg-sky-700 py-1 px-2 rounded-lg">
        Action
      </button>
    </header>
 
    <main class="flex justify-center items-center content-center">
      <p>{{ message }}</p>
    </main>
  </div>
</template>

Tailwind

<script setup>
// * Data *
 
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
 
// * Methods *
 
function greeting() {
  alert(this.message)
}
</script>
 
<template>
  <div class="page">
    <header class="header">
      <h2 class="title">ResourceName</h2>
 
      <button @click="greeting" class="action">Action</button>
    </header>
 
    <main class="content">
      <p>{{ message }}</p>
    </main>
  </div>
</template>
 
<style scoped>
.page {
  @apply flex flex-col justify-start;
  @apply py-5 px-10;
}
 
.header {
  @apply flex flex-row justify-between items-center content-center;
}
 
.title {
  @apply text-slate-800 text-xl;
}
 
.content {
  @apply flex justify-center items-center content-center;
}
 
.action {
  @apply text-white bg-sky-500;
  @apply hover:bg-sky-700;
  @apply py-1 px-2;
  @apply rounded-lg;
}
</style>

Component Storybook