How to install Vue,Vue-router,Tailwind with Laravel 9,Vite

#laravel #vue #vite #tailwindcss

Here we will talk about how you can install Vue and Tailwind with Vite in Laravel 9.
After installing laravel go to project directory cli and type
npm i vue@next vue-loader.You also need to install
vitejs/plugin-vue Now if you look at package.json files you will see

So we got all our dependencies installed for now.
In our project directory in js folder create another folder called components.In components folder create a file called App.vue
You can name the file and folder as per your choice.
In app.js now

So here we can see app.js
*** Note carefully whatever your file name is here you need to import as name of your file and write Component with it otherwise it wont work.Here if your component name is Example you need to import it as ExampleComponent otherwise things wont work***
Now in
vite.config.js

Here we need to import vue
In welcome.blade.php we need to mount the id #app to the DOM.

**Here inside div with id app we need to write name of our component in this format if name of your component is example component it will be ** <example-component></example-component> Strictly ensure to write it this way.
now in CLI run npm run dev
Now we can see both terminals side by side

**In App.vue*

In our browser if we check now

Vue Router
Here we will show how you can install vue router.npm install vue-router@4 type this in CLI.

Inside js folder create a folder called router inside router create a file called index.js

in app.js

Here we import router and at bottom as we see write app.use(router)
In App.vue

Here to see all elements of router we need to write <router-view /> so we can now see it on browser

**But there is a problem now*

If we create a new route with a component associated like shown in above here its about route. When we go to about route it gives a 404 error.

Here the about route gives a 404 error. Quick fix here
In routes/web.php
Route::get('/{any}', function () { return view('welcome'); })->where("any",".*");

Now we can see the route about works

Installing Tailwind
First go onto CLI and type npm install -D tailwindcss postcss autoprefixer now you can go to package.json file and see

Then in CLI write npx tailwindcss init -p
in tailwind.config.js

Go onto resources css/app.css in app.css write

Restart your npm terminal run npm run dev again
In About.vue if we see

If we see on the browser again