Project Structure

Vue and Nuxt projects are organized differently. A create-vue project follows ordinary Vite conventions and you write the entry point yourself. In Nuxt, folder names carry meaning: put a file in the right place and it becomes a route, a component or a server API. This chapter tours both layouts and their main configuration files.

A create-vue project

A project created with TypeScript, Router, Pinia and Vitest looks roughly like this:

my-vue-app/
├── index.html            # Vite's entry HTML
├── public/               # static files copied as-is
├── src/
│   ├── main.ts           # creates the app, registers plugins
│   ├── App.vue           # root component
│   ├── assets/           # CSS and images processed by the build
│   ├── components/       # reusable components
│   ├── views/            # screen components mapped to routes
│   ├── router/index.ts   # Vue Router setup
│   └── stores/           # Pinia stores
├── vite.config.ts
├── tsconfig.json
└── package.json

Splitting views/ from components/ is a convention rather than a rule, but separating screens from reusable pieces keeps things easy to find as the project grows.

The entry point: main.ts

A Vue app is created with createApp, gets its plugins registered, and is mounted onto an element in index.html.

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import "./assets/main.css";

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");

Routes are declared explicitly in src/router/index.ts. Lazy-loading rarely visited views with () => import(...) keeps the initial bundle small.

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: "/", name: "home", component: HomeView },
    { path: "/about", name: "about", component: () => import("../views/AboutView.vue") },
  ],
});

export default router;

Configuration: vite.config.ts

The Vite config registers the Vue plugin and a path alias. @ points at src, so you can write import Foo from "@/components/Foo.vue".

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
  },
});

Environment variables go in .env files at the project root. Only names prefixed with are exposed to client code, as in .