Prerequisites: Node.js and npm

Before starting, verify that Node.js and npm are installed on your system. Use the terminal to check the installed versions:

node --version
npm --version

If these commands return version numbers, you are ready to proceed. If not, download and install the latest LTS version from the official Node.js website.

Initializing a New Vue 3 Project

Vite provides a fast and straightforward way to scaffold a new Vue 3 project. Execute the following command in your terminal:

npm create vite@latest vue3-vite-project -- --template vue

Replace vue3-vite-project with your desired project name. This command initializes a new directory with a pre-configured Vue 3 template.

Installing Project Dependencies

Navigate into the newly created project directory:

cd vue3-vite-project

Then, install all necessary dependencies defined in the package.json file:

npm install

Launching the Development Server

Start the local development server with the folloiwng command:

npm run dev

Once the server is running, open your web browser and navigate to http://localhost:5173. You should see the default Vue 3 welcome page.

Understanding the Project Structure

After setup, your project directory will have a structure similar to this:

vue3-vite-project
├── index.html
├── package.json
├── src
│   ├── assets
│   │   └── vue-logo.svg
│   ├── components
│   │   └── WelcomeMessage.vue
│   ├── App.vue
│   └── main.js
├── vite.config.js
└── node_modules

• index.html: The main HTML entry point for the application.
• src/: Contains all application source code, including Vue components and logic.
• src/main.js: The JavaScript entry file that mounts the Vue application.
• src/App.vue: The root Vue component.
• vite.config.js: Configuration file for Vite build tool settings.

Customizing Vite Configuration

The vite.config.js file allows for project-specific build configurations. While the default settings are sufficient for most projects, you can modify options like server port, aliases, or plugin integrations here.

Creating and Using Vue Components

New components are typically placed in the src/components directory. For example, create a file named UserGreeting.vue:

<template>
  <section class="greeting">
    <h2>{{ welcomeText }}</h2>
  </section>
</template>

<script>
export default {
  name: 'UserGreeting',
  data() {
    return {
      welcomeText: 'Welcome to Vue 3 with Vite!'
    };
  }
};
</script>

<style scoped>
.greeting h2 {
  color: #2c3e50;
  font-family: Arial, sans-serif;
}
</style>

To use this component, import and register it in the root App.vue file:

<template>
  <div id="application-root">
    <img alt="Vue logo" src="./assets/vue-logo.svg">
    <UserGreeting />
  </div>
</template>

<script>
import UserGreeting from './components/UserGreeting.vue';

export default {
  name: 'App',
  components: {
    UserGreeting
  }
};
</script>

<style>
#application-root {
  text-align: center;
}
</style>

Building for Production

When development is complete, generate optimized production files with the build command:

npm run build

This process compiles and minifies your project assets, outputting them to a dist directory. The contents of this folder can be deployed to any static web hosting service.