Vite JS Tutorial: @vitejs/plugin-vue

Welcome to our comprehensive guide on using the @vitejs/plugin-vue in your projects! In this tutorial, we'll learn about Vite, a modern build tool for the web, and how to integrate it with Vue.js, a popular JavaScript framework. Let's get started! 🎯

What is Vite?

Vite is a lightning-fast, next-generation build tool for modern web development. Unlike traditional build tools that use bundlers like Webpack, Vite uses a "dev server with an in-memory file system" approach, making it faster and more efficient.

What is @vitejs/plugin-vue?

@vitejs/plugin-vue is an official Vite plugin that simplifies the setup process for Vue.js projects and provides built-in support for features like Hot Module Replacement (HMR).

Setting Up a Vite Project with @vitejs/plugin-vue

First, make sure you have Node.js and npm installed on your system. If not, follow the instructions on the official Node.js website to install them.

Next, install Vite globally using npm:

bash

npm install -g vite

Now, let's create a new Vue.js project using @vitejs/plugin-vue:

bash

vite create my-vue-app
cd my-vue-app

Replace my-vue-app with your desired project name.

Exploring the Project Structure

Navigate to the src folder and open the App.vue file:

bash

cd src
code App.vue

This file is the entry point for your Vue.js application.

Running the Project

To start the development server, use the following command:

bash

vite

Now, open your browser and navigate to http://localhost:3000. You should see your Vue.js application running! 🎉

Code Examples

Example 1: Simple Vue.js Component

Create a new file named Counter.vue in the src folder:

vue

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

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

Now, use the Counter component in the App.vue file:

vue

<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script>
import Counter from './Counter.vue'

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

Example 2: Using Vue Router

To add routing functionality to your application, install the @vue/router package:

bash

npm install @vue/router

Now, create a new file named router.js in the src folder:

javascript

import VueRouter from 'vue-router'
import Home from './views/Home.vue'

const routes = [
  { path: '/', component: Home }
]

export default new VueRouter({
  routes
})

Create a Home component in the src/views folder:

vue

<template>
  <div>
    <h1>Welcome to our home page!</h1>
  </div>
</template>

Update the App.vue file to use the router:

vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Finally, update the main.js file to include the router:

javascript

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

Quiz

That's it for our Vite JS tutorial on using the @vitejs/plugin-vue. We hope you found this guide helpful in getting started with Vite and Vue.js! 💡

📝 Note: As you progress in your Vue.js journey, you'll learn more about features like state management, testing, and deployment. Keep learning and practicing, and you'll be able to build amazing web applications! 🚀