Component
Vue 2
Options API
CSS Modules
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div :class="$style.component">
<p :class="$style.message">
{{ message }}
</p>
</div>
</template>
<style scoped module>
.component {
display: flex;
justify-content: center;
align-items: center;
}
.message {
color: #333;
}
</style>Unstyled
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div>
<p>
{{ message }}
</p>
</div>
</template>CSS
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div class="component">
<p class="message">
{{ message }}
</p>
</div>
</template>
<style scoped>
.component {
display: flex;
justify-content: center;
align-items: center;
}
.message {
color: #333;
}
</style>SCSS
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div class="component">
<p class="message">
{{ message }}
</p>
</div>
</template>
<style scoped lang="scss">
.component {
display: flex;
justify-content: center;
align-items: center;
.message {
color: #333;
}
}
</style>Tailwind Inline
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div class="flex justify-center items-center">
<p class="text-slate-800">
{{ message }}
</p>
</div>
</template>Tailwind
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div class="component">
<p class="message">
{{ message }}
</p>
</div>
</template>
<style scoped>
.component {
@apply flex justify-center items-center;
}
.message {
@apply text-slate-800;
}
</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!"
}
}
}
</script>
<template>
<div :class="$style.component">
<p :class="$style.message">
{{ message }}
</p>
</div>
</template>
<style scoped module>
.component {
display: flex;
justify-content: center;
align-items: center;
}
.message {
color: #333;
}
</style>Unstyled
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div>
<p>
{{ message }}
</p>
</div>
</template>CSS
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div class="component">
<p class="message">
{{ message }}
</p>
</div>
</template>
<style scoped>
.component {
display: flex;
justify-content: center;
align-items: center;
}
.message {
color: #333;
}
</style>SCSS
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div class="component">
<p class="message">
{{ message }}
</p>
</div>
</template>
<style scoped lang="scss">
.component {
display: flex;
justify-content: center;
align-items: center;
.message {
color: #333;
}
}
</style>Tailwind Inline
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div class="flex justify-center items-center">
<p class="text-slate-800">
{{ message }}
</p>
</div>
</template>Tailwind
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div class="component">
<p class="message">
{{ message }}
</p>
</div>
</template>
<style scoped>
.component {
@apply flex justify-center items-center;
}
.message {
@apply text-slate-800;
}
</style>Composition API
Css Modules
<script setup>
// * Data *
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
</script>
<template>
<div :class="$style.component">
<p :class="$style.message">
{{ message }}
</p>
</div>
</template>
<style scoped module>
.component {
display: flex;
justify-content: center;
align-items: center;
}
.message {
color: #333;
}
</style>Unstyled
<script setup>
// * Data *
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
</script>
<template>
<div>
<p>
{{ message }}
</p>
</div>
</template>CSS
<script setup>
// * Data *
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
</script>
<template>
<div class="component">
<p class="message">
{{ message }}
</p>
</div>
</template>
<style scoped>
.component {
display: flex;
justify-content: center;
align-items: center;
}
.message {
color: #333;
}
</style>SCSS
<script setup>
// * Data *
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
</script>
<template>
<div class="component">
<p class="message">
{{ message }}
</p>
</div>
</template>
<style scoped lang="scss">
.component {
display: flex;
justify-content: center;
align-items: center;
.message {
color: #333;
}
}
</style>Tailwind Inline
<script>
export default {
name: 'ResourceName',
data() {
return {
message: "Hello, I'm a resource auto generated by Clingon CLI!"
}
}
}
</script>
<template>
<div class="flex justify-center items-center">
<p class="text-slate-800">
{{ message }}
</p>
</div>
</template>Tailwind
<script setup>
// * Data *
const message = "Hello, I'm a resource auto generated by Clingon CLI!"
</script>
<template>
<div class="component">
<p class="message">
{{ message }}
</p>
</div>
</template>
<style scoped>
.component {
@apply flex justify-center items-center;
}
.message {
@apply text-slate-800;
}
</style>