🌟 We are Open Source! Check out our repository on GitHub

Vue.js Project Structure

A scalable and maintainable folder structure for Vue.js applications

File Structure

  • src
    • components
      • HelloWorld.vue
      • TheNavbar.vue
      • TheFooter.vue
    • assets
      • main.css
      • logo.svg
    • App.vue
    • main.ts
  • index.html
  • vite.config.ts
  • package.json
  • README.md

Directory Structure Explanation

src/

The main source directory containing all Vue.js application code and assets.

src/components/

Contains reusable Vue components that can be imported and used across the application. Following Vue.js best practices, component files use PascalCase names.

components/HelloWorld.vue

A sample component demonstrating Vue.js component structure with template, script, and style sections.

components/TheNavbar.vue

The main navigation component. The 'The' prefix indicates it's a single-instance component used at the app root level.

components/TheFooter.vue

The footer component. Like TheNavbar, it's a single-instance component used globally in the application.

src/assets/

Contains static assets like stylesheets, images, and fonts used throughout the application.

assets/main.css

Global CSS styles that apply to the entire application.

App.vue

The root Vue component that serves as the application entry point. It typically includes the main layout and global components.

main.ts

The application's entry point where the Vue app is initialized, plugins are registered, and the app is mounted to the DOM.

vite.config.ts

Configuration file for Vite, the build tool. It includes settings for plugins, build options, and development server.