SETUP WITH VUE

Refer to Laravel Setup before start this page.

Pre-requisite

Node.js

Download Node.js at https://nodejs.org/en/

Install Vue

There is 2 method to install vue. Recommend Method 1

Method 1: npm create vite@latest [the project name] --template vue

  1. Firstly, run this command in CMD. [the project name] can be changed to any other name like below, Assume I set the project name to [frontend].

npm create vite@latest frontend --template vue
  1. Then, press "y".

  1. Then, choose "Vue".

  1. Then, choose "JavaScript".

  1. Install Vite Locally. Go into the direction of the project name, if your project name frontend, then run the command like below

cd frontend

  1. Install Vite Locally. Go into the direction of the project name, if your project name frontend, then run the command like below

npm install vite --save-dev
  1. Check npm Scripts: Ensure that the vite command is correctly referenced in your package.json file within the scripts section. It should look something like this:

Method 2: vue create my-vue3-app

Refer to Vue Setup.

Run the Vue

  1. Go into the direction of the project name, if your project name frontend, then run the command like below

cd frontend
  1. Then, run this command

npm install
  1. And, run this command. This command will provide the link to view the Vue.

npm run dev

Result

At the end, your folder architecture with be look like this:

Last updated