Components

By default place components in the components directory.

Conventions

Naming

Name components with pascal case.

root
. ├── components │ ├── ComponentOne.vue │ ├── ComponentTwo.vue │ └── ... └── App.vue

Group components by function/feature in subdirectories.

root
. ├── components │ ├── Navbar │ │ ├── NavbarItem.vue │ │ ├── NavbarContainer.vue │ │ └── ... │ └── Sidebar │ ├── SidebarItem.vue │ ├── SidebarContainer.vue │ └── ... └── App.vue

Resources

For domain specific resources follow this pattern as well.

. ├── components │ └── Todos │ ├── TodosList.vue │ ├── TodosForm.vue │ └── TodosMeta.vue └── App.vue

The

If there is "one" of something then convention is the prefix with "The".

root
. ├── components │ ├── Todos │ │ └── ... │ ├── TheNavbar │ │ └── ... │ └── TheSidebar │ └── ... └── App.vue

Base Components

Base components should begin with V, Base, or App.

root
. ├── components │ ├── Todos │ │ └── ... │ ├── TheNavbar │ │ └── ... │ ├── TheSidebar │ │ └── ... │ ├── VButton │ ├── VIcon │ ├── VTable │ └── ... └── App.vue

Conventions helps others onboard quickly. They're community conventions.

Scripts

If you initialized your project with the default vue create command

$ npx vue create hello-world

You'll see a project structure like this:

./component.vue
vue
. ├── public └── src ├── assets ├── components ├── router ├── stores └── views

You could then import and use components like so.

./views/HomeView.vue
vue
<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.

./views/HomeView.vue
vue
<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...

Script

The script tag is used for defining JS.

./component.vue
vue
<script> const message = 'Hello Vue' </script> <template> <h1>Hello Vue!</h1> </template>

Handlebars

With handlebar syntax we use the JS variables inside the template.

./component.vue
vue
<script> const message = 'Hello Vue' </script> <template> <h1>{{ message }}</h1> </template>

Events

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

vue
<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.

vue
<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

diff.js
js
export default { data () { return { msg: 'Removed' // [!code --] msg: 'Added' // [!code ++] } } }
focus.js
js
export default { data() { return { msg: 'Focused!', // [!code focus] } }, }

Scripts

Props

./component.vue
vue
<script setup> </script> <template> </template>
./component.vue
vue
<script setup> </script> <template> </template>

Script syntax

Styles

Props

components ├── AComponent.vue └── BComponent.vue