VueJS is a JavaScript framework that helps build single-page websites and web applications in a simple way. It has a component-based structure that allows to split the whole structure and reuse it anywhere. You can install VueJS via cdn and html and through modern build tools like Vite in Laravel. In this tutorial we will learn in detail on how to install VueJS 3 using Vite.
Install VueJS 3 using Vite
As a perquisite to use this way of installation, you must first install the latest version of Node.js.
Once you install node.js, open your command line or terminal, move to the directory where you want to install the VueJS project files and run the command as shown below.
npm init vue@latestWhen executing the command above you will be asked to select specific features as follows:
Need to install the following packages:
create-vue@latest
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
✔ Project name: … Demo
✔ Package name: … package.json
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / YesYou can select ‘No’ to options you are not sure about.
Next, navigate to your project folder, install npm and run dev as shown below.
> cd Demo
> npm install
> npm run devThat’s all done now, you may navigate to your localhost URL http://localhost:3000/ (Open in browser) to display your Laravel and VueJS app.
That’s it, you may now open your project files in any code editor, open the App.vue file under the src folder and edit with your own code!
