Components

By default place components in the components directory.

Conventions

Naming

Name components with pascal case.

root

1
.
2
├── components
3
│   ├── ComponentOne.vue
4
│   ├── ComponentTwo.vue
5
│   └── ...
6
└── App.vue

Group components by function/feature in subdirectories.

root

1
.
2
├── components
3
│   ├── Navbar
4
│   │   ├── NavbarItem.vue
5
│   │   ├── NavbarContainer.vue
6
│   │   └── ...
7
│   └── Sidebar
8
│       ├── SidebarItem.vue
9
│       ├── SidebarContainer.vue
10
│       └── ...
11
└── App.vue

Resources

For domain specific resources follow this pattern as well.

1
.
2
├── components
3
│   └── Todos
4
│       ├── TodosList.vue
5
│       ├── TodosForm.vue
6
│       └── TodosMeta.vue
7
└── App.vue

The

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

root

1
.
2
├── components
3
│   ├── Todos
4
│   │   └── ...
5
│   ├── TheNavbar
6
│   │   └── ...
7
│   └── TheSidebar
8
│       └── ...
9
└── App.vue

Base Components

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

root

1
.
2
├── components
3
│   ├── Todos
4
│   │   └── ...
5
│   ├── TheNavbar
6
│   │   └── ...
7
│   ├── TheSidebar
8
│   │   └── ...
9
│   ├── VButton
10
│   ├── VIcon
11
│   ├── VTable
12
│   └── ...
13
└── 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

1
.
2
├── public
3
└── src
4
    ├── assets
5
    ├── components
6
    ├── router
7
    ├── stores
8
    └── views

You could then import and use components like so.

./views/HomeView.vue

vue

1
<script setup lang="ts">
2
import Todos from '../components/Todos.vue'
3
</script>
4

5
<template>
6
  <main>
7
    <Todos />
8
  </main>
9
</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

1
<script setup lang="ts">
2 -
import Todos from '../components/Todos.vue'  
3
</script>
4

5
<template>
6
  <main>
7
    <Todos />
8
  </main>
9
</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

1
<script>
2
const message = 'Hello Vue'
3
</script>
4

5
<template>
6
  <h1>Hello Vue!</h1>
7
</template>

Handlebars

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

./component.vue

vue

1
<script>
2
const message = 'Hello Vue'
3
</script>
4

5
<template>
6
  <h1>{{ message }}</h1>
7
</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

1
<template>
2
  <button v-on:click="console.log('Clicked')">
3
    Log clicked
4
  </button>
5
</template>

The @ we saw earlier allows us to listen for or bind to future events.

vue

1
<template>
2 -
  <button v-on:click="console.log('Clicked')">  
3 +
  <button @click="console.log('Clicked')">  
4
    Log clicked
5
  </button>
6
</template>

The syntax @click is shorthand for bind v-on:click

diff.js

1
export default {
2
  data () {
3
    return {
4 -
      msg: 'Removed' 
5 +
      msg: 'Added' 
6
    }
7
  }
8
}

focus.js

1
export default {
2
  data() {
3
    return {
4
      msg: 'Focused!', 
5
    }
6
  },
7
}

Scripts

Props

./component.vue

vue

1
<script setup>
2
</script>
3

4
<template>
5
</template>

./component.vue

vue

1
<script setup>
2

3
</script>
4
<template>
5
</template>

Script syntax

Styles

Props

1
components
2
├── AComponent.vue
3
└── BComponent.vue