Embark on a journey to streamline your Vue projects with Vite. This comprehensive guide walks you through project setup, component creation, and deployment. Harness the power of Vite for rapid and efficient Vue development.
In this blog post, we'll walk through the process of setting up a Vue project using Vite as the build tool. Vite is a blazing fast build tool that significantly speeds up the development process. We'll cover everything from project setup to creating components and building the project for deployment.
Step 1: Project Setup
First, let's set up our project by installing the necessary packages using npm:
npm install @next-vue/vue-loader @vitejs/plugin-vue vue@nextNext, we'll create a vite.config.js file to configure the Vue plugin:
// vite.config.js
import vue from '@vitejs/plugin-vue';
export default {
plugins: [
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
};Step 2: Creating the App Entry Point
// app.js
import { createApp } from 'vue';
import './bootstrap'; // Assuming bootstrap setup file
import SendMessage from './components/SendMessage.vue';
const app = createApp({
components: {
SendMessage,
},
});
app.mount('#app');Step 3: Component Setup
Step 4: HTML Structure
<!-- index.html -->
<html>
<head>
<!-- Head content -->
</head>
<body>
<div id="app">
<send-message></send-message>
</div>
<script type="module" src="/path/to/your/app.js"></script>
</body>
</html>Step 5: Testing
npm run devStep 6: Building
npm run buildRecently used in Laravel 10 project
npm i @next-vue/vue-loader
npm i @vitejs/plugin-vue
In vite.config.js,
import vue from '@vitejs/plugin-vue'
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
in app js
import './bootstrap';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import SendMessage from './components/SendMessage.vue'
const app=createApp({
components:{
SendMessage,
}
});
app.mount('#app');
then update node 20 or add
<div id="app">
<send-message>
</send-message>
</div>
npm run build
