VueModernTemplate

A template for modern vue programming. We are now at 2026. Don't use outdated practices anymore.

We use:

• Vue 3 with Composition API (script setup)
• Vite as build tool
• TypeScript
• Pinia for state management
• Vue Router for routing TODO
• Prettier for code formatting
• Tailwind CSS for styling
• Bundle visualizer for analyzing bundle size

Usage

npm i # Install dependencies
npm run dev # Start development server
npm run build # Build for production
npm run format # Format the code

How It works

Rollup Plugin Visualizer

We use the rollup-plugin-visualizer plugin to generate a bundle analysis report after building the project. This report helps us understand the size of our bundles and identify potential optimizations. After running npm run build, a file named bundle-analysis.html will be created in the project root.

It is configured in vite.config.ts as follows:

import { visualizer } from "rollup-plugin-visualizer"

export default defineConfig({
    plugins: [
        // other plugins...
        visualizer({
            open: true, // Open the report automatically
            filename: "dist/bundle-analysis.html", // Name of the output file
            gzipSize: true, // Show gzip sizes
            brotliSize: true, // Show brotli sizes
        }),
    ],
})

Open this file in a web browser to view the report.

Tailwind CSS

We use Tailwind CSS for styling our application. It is integrated into the project via the @tailwindcss/vite plugin, which is configured in vite.config.ts:

import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
    plugins: [
        // other plugins...
        tailwindcss(),
    ],
})

It works by importing the Tailwind CSS styles in the css file and importing it in src/main.ts:

// src/index.css
@import "tailwindcss";

/* or (remove any of them if not needed) */

@import "tailwindcss/base.css" layer(base);
@import "tailwindcss/components.css" layer(components);
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

// src/main.ts
import './index.css'

This setup allows us to use Tailwind CSS utility classes throughout our Vue components for rapid and consistent styling.

Pinia

We use Pinia for state management in our Vue application. States can then be remembered and synced across components and pages. It is set up in src/main.ts as follows:

import { createPinia } from "pinia"
import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
const pinia = createPinia()

app.use(pinia).mount("#app")

After this setup, you can create Pinia stores in your application and use them in your Vue components.

Stores can be defined in separate files, for example:

See example in src/stores/example.ts on how to set up a basic store with Pinia. See example in src/stores/examplePersisted.ts on how to set up a persisted store with Pinia.

You can then use the store in your Vue components like this:

<template>
    <div>
        <p>Count: {{ counter.count }}</p>
        <button @click="counter.increment">Increment</button>
    </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/stores/counter"
const counter = useCounterStore()
</script>