Components
By default place components in the components
directory.
Name components with pascal case.
.
├── components
│ ├── ComponentOne.vue
│ ├── ComponentTwo.vue
│ └── ...
└── App.vue
Group components by function/feature in subdirectories.
.
├── components
│ ├── Navbar
│ │ ├── NavbarItem.vue
│ │ ├── NavbarContainer.vue
│ │ └── ...
│ └── Sidebar
│ ├── SidebarItem.vue
│ ├── SidebarContainer.vue
│ └── ...
└── App.vue
For domain specific resources follow this pattern as well.
.
├── components
│ └── Todos
│ ├── TodosList.vue
│ ├── TodosForm.vue
│ └── TodosMeta.vue
└── App.vue
If there is "one" of something then convention is the prefix with "The".
.
├── components
│ ├── Todos
│ │ └── ...
│ ├── TheNavbar
│ │ └── ...
│ └── TheSidebar
│ └── ...
└── App.vue
Base components should begin with V, Base, or App.
.
├── components
│ ├── Todos
│ │ └── ...
│ ├── TheNavbar
│ │ └── ...
│ ├── TheSidebar
│ │ └── ...
│ ├── VButton
│ ├── VIcon
│ ├── VTable
│ └── ...
└── App.vue
Conventions helps others onboard quickly.
They're community conventions.
If you initialized your project with the default vue create
command
$ npx vue create hello-world
You'll see a project structure like this:
.
├── public
└── src
├── assets
├── components
├── router
├── stores
└── views
You could then import and use components like so.
<script setup lang="ts">
import Todos from '../components/Todos.vue'
</script>
<template>
<main>
<Todos />
</main>
</template>
If you're using Nuxt
then you don't have to import anything from the components
dir as Nuxt
will do it for you automatically.
<script setup lang="ts">
import Todos from '../components/Todos.vue' // [!code --]
</script>
<template>
<main>
<Todos />
</main>
</template>
It's more useful to bind values to a user event though
All HTML tags are supported. div, img, span, textarea, canvas, etc...
The script tag is used for defining JS.
<script>
const message = 'Hello Vue'
</script>
<template>
<h1>Hello Vue!</h1>
</template>
With handlebar syntax we use the JS variables inside the template.
<script>
const message = 'Hello Vue'
</script>
<template>
<h1>{{ message }}</h1>
</template>
We can handle events by binding an handler using v-on
. We use it with an event we're
listening for. For example v-on:click
<template>
<button v-on:click="console.log('Clicked')">
Log clicked
</button>
</template>
The @
we saw earlier allows us to listen for or bind to future events.
<template>
<button v-on:click="console.log('Clicked')"> // [!code --]
<button @click="console.log('Clicked')"> // [!code ++]
Log clicked
</button>
</template>
The syntax @click
is shorthand for bind v-on:click
export default {
data () {
return {
msg: 'Removed' // [!code --]
msg: 'Added' // [!code ++]
}
}
}
export default {
data() {
return {
msg: 'Focused!', // [!code focus]
}
},
}
<script setup>
</script>
<template>
</template>
<script setup>
</script>
<template>
</template>
Script syntax
components
├── AComponent.vue
└── BComponent.vue