Structure of a Vue.js Project

The package.json file is essential in any Node.js project. It contains metadata about the project, such as its name, version, dependencies, and scripts.

• Dependencies: Here, all the necessary dependencies for the project are listed.
• Scripts: Defines useful commands to run common tasks, such as starting the development server or building the project for production.

This directory contains all the Node.js dependencies your project needs. You should not manually modify anything in this directory, as it is managed automatically by npm or yarn.

It contains all dependencies installed via npm install. We do not need to modify anything here directly, as this directory is automatically managed by npm and Vite.

Depending on whether you are using Vite or Vue CLI, you will find one of these configuration files. Here you can customize the behavior of the development server, the build, and other project-specific configurations.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
plugins: [vue()],
server: {
port: 3000,
},
});

This file specifies which files and directories should be ignored by Git. It is useful to avoid uploading unnecessary or sensitive files to the repository.

node_modules/
dist/
.env

These files contain environment variables that can be used in your application. For example, you can define the URL of an API or authentication keys.

VUE_APP_API_URL=https://api.example.com

ESLint configuration to maintain code standards:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Entry point of the application. Here Vue is mounted and the application is configured.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(router)

app.mount('#app')

The root component of the application:

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld msg="Welcome to your Vue 3 application!" />
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

/* More styles... */
</style>

This directory contains static resources like images, fonts, and global styles. Unlike files in public/, files in assets/ are processed by Vue’s build system.

import '@/assets/global.css';

This directory stores static resources that will be processed by Vite. For example,

assets/
├── logo.svg
└── main.css

This directory stores reusable Vue components. Components in Vue are independent interface pieces that we can combine to build the application’s structure.

Each Vue component has its own .vue file, which includes the template, script, and styles.

Components should be named using the PascalCase (HelloWorld.vue) or kebab-case (hello-world.vue) format to follow Vue conventions. For example,

components/
├── HelloWorld.vue
├── TheHeader.vue
├── TheFooter.vue
└── ui/
    ├── BaseButton.vue
    └── BaseInput.vue

Here we store the main views of the application, which are usually associated with specific routes in Vue Router. For example,

views/
├── HomeView.vue
└── AboutView.vue

Here we configure Vue Router to manage navigation in our application. For example,

router/
└── index.js

For state management with Pinia (if we use it of course). For example,

stores/
└── counter.js

For APIs and external services. For example,

services/
├── api.js
└── authService.js

Composables are reusable functions that encapsulate shared logic. For example,

utils/
├── useFilterTable.js
└── useValidateNumber.js

For utility functions. For example,

utils/
├── formatter.js
└── validation.js