How to create a new Vue 3 project
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Starting a new Vue 3 project correctly is the foundation of a scalable and maintainable application.
As a developer with over 25 years of experience and the creator of CoreUI, I have overseen the architecture of hundreds of Vue-based dashboards and enterprise tools.
The most efficient and modern solution for scaffolding a new project today is using the official create-vue package, which is powered by Vite.
This approach replaces the older Vue CLI, offering significantly faster build times and a superior developer experience through native ES modules.
Use the official npm create vue@latest command to start an interactive project scaffolding process.
npm create vue@latest
This command initiates an interactive wizard that guides you through the configuration of your Vue 3 application. You will be prompted to enter a project name and select optional features such as TypeScript support, JSX support, Vue Router for single-page application development, Pinia for state management, and various testing frameworks. Once you make your selections, the tool generates a pre-configured directory structure with all necessary dependencies defined in your package.json file. Unlike the legacy Vue CLI, this modern approach utilizes Vite as the underlying build tool, providing near-instantaneous Hot Module Replacement (HMR) and optimized production builds.
1. Initializing the Project
The first step in creating a modern Vue application is executing the scaffolding command in your terminal. This tool is designed to be lightweight and always up-to-date with the latest Vue standards.
# Execute the creation command
npm create vue@latest
# The installer will prompt you for several options:
# ✔ Project name: … my-coreui-app
# ✔ Add TypeScript? … Yes
# ✔ Add JSX Support? … No
# ✔ Add Vue Router for Single Page Application development? … Yes
# ✔ Add Pinia for state management? … Yes
# ✔ Add Vitest for Unit Testing? … Yes
# ✔ Add an End-to-End Testing Solution? … No
# ✔ Add ESLint for code quality? … Yes
# ✔ Add Prettier for code formatting? … Yes
# Navigate into the project folder
cd my-coreui-app
# Install dependencies
npm install
# Start the development server
npm run dev
Selecting TypeScript is highly recommended for modern enterprise applications to ensure type safety and better IDE support.
2. Understanding the Feature Selection
The interactive prompts allow you to customize your stack. Each choice integrates specific libraries that are standard in the Vue ecosystem.
// Example: src/main.ts after selecting Router and Pinia
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// Initialize the Vue application instance
const app = createApp(App)
// Register Pinia for global state management
app.use(createPinia())
// Register Vue Router for navigation
app.use(router)
// Mount the application to the DOM
app.mount('#app')
Using Pinia instead of Vuex is now the official recommendation for state management in Vue 3. It provides a simpler API and excellent TypeScript integration out of the box. For complex forms within these projects, you might want to learn how to use v-model in vue to handle data binding efficiently.
3. Integrating CoreUI Vue Components
Once your project is scaffolded, adding a UI library like CoreUI provides you with ready-to-use, accessible components that follow consistent design patterns.
# Install CoreUI for Vue and Bootstrap
npm install @coreui/vue @coreui/coreui bootstrap
After installation, you can register CoreUI components globally or import them as needed.
// src/main.ts
import { createApp } from 'vue'
import CoreuiVue from '@coreui/vue'
import App from './App.vue'
// Import CoreUI CSS styles
import '@coreui/coreui/dist/css/coreui.min.css'
const app = createApp(App)
// Use CoreUI components globally
app.use(CoreuiVue)
app.mount('#app')
This setup allows you to use professional components like CoreUI Buttons immediately. Using a pre-built system ensures your application remains visually cohesive and functionally robust from day one.
4. Creating Your First Composition API Component
Vue 3 emphasizes the Composition API with the <script setup> syntax, which provides a more concise way to write components compared to the Options API.
<script setup>
import { ref, onMounted } from 'vue'
// Reactive state using ref
const count = ref(0)
// Function to increment counter
const increment = () => {
count.value++
}
// Lifecycle hook example
onMounted(() => {
console.log('Component is now mounted')
})
</script>
<template>
<div class='container p-4'>
<h1>Welcome to Vue 3</h1>
<p>Counter: {{ count }}</p>
<button
class='btn btn-primary'
@click='increment'
>
Increment
</button>
</div>
</template>
<style scoped>
/* Scoped styles stay within this component */
.container {
max-width: 600px;
margin: 0 auto;
}
</style>
The script setup block is handled by a compile-time transformation that makes the variables and functions available directly in the template. If you need to manage component-specific styling, refer to how to scope css in vue for more detailed techniques.
5. Configuration with Vite
The vite.config.ts file is the heart of your build process. It allows you to configure aliases, plugins, and proxy settings for your development environment.
// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
// Setup @ alias to point to the src directory
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
// Customize port or host if necessary
port: 3000,
open: true
}
})
Vite’s configuration is significantly simpler than Webpack’s. It uses a plugin-based architecture — for example, adding JSX support later is as simple as installing @vitejs/plugin-vue-jsx and adding vueJsx() to the plugins array.
6. Project Directory Structure
A standard Vue 3 project generated via create-vue follows a logical organization that separates logic, templates, and assets.
my-coreui-app/
├── public/ # Static assets (not processed by Vite)
├── src/ # Main source code
│ ├── assets/ # Processed assets (CSS, Images)
│ ├── components/ # Reusable UI components
│ ├── router/ # Route definitions
│ ├── stores/ # Pinia state stores
│ ├── views/ # Page-level components
│ ├── App.vue # Root component
│ └── main.ts # Entry point
├── .eslintrc.cjs # Linting configuration
├── index.html # Template entry
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── vite.config.ts # Build tool configuration
Maintaining this structure is crucial for team collaboration. We use this exact organization in our Free Vue Admin Template to ensure that developers can easily navigate and extend the codebase.
7. Preparing for Production
When your development is complete, you need to generate an optimized build for deployment.
# Build the application for production
npm run build
# Preview the production build locally
npm run preview
The build command invokes Vite to bundle your code. It performs tree-shaking, code-splitting, and minification to ensure the final assets are as small as possible. The output is placed in the dist/ folder, which can be served by any static web server or CDN.
Best Practice Note:
Always use the create-vue tool instead of manually setting up Vite for Vue projects, as it includes the necessary configurations for official plugins and recommended tools. At CoreUI, we suggest starting with our Vue Dashboard Template if you need a pre-configured environment with a comprehensive set of UI components and layout systems already implemented. This can save you weeks of development time by providing a solid architectural foundation.
