How to install Vue,Vue-router,Tailwind with Laravel 9,Vite
Tags: laravel, vue, vite, tailwindcss
Published: 2022-07-31 04:37:49

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 
![packagejsonfile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhyciky8rtnhunan4yfw.png)
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
![appjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zc1zij6n29lpw9buw14.png) 
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` 
![vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4vq5xk84xglqubwol2f.png)
Here we need to import `vue`
In `welcome.blade.php` we need to mount the id `#app` to the DOM.
![welcomeblade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6ud13zmzr9tw1b97l0n.png)
***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 
![allterminals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q63ajz49xj1vgvidb87p.png)
***In App.vue**
![AppVue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9dmjlfphsolmudone66.png)
 In our browser if we check now 
![AppHello](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llozqlx59xtwy64fzxt2.png)
***Vue Router***
Here we will show how you can install vue router.`npm install vue-router@4` type this in CLI.
![pacakgejson](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83r74qvsrascdx21y80i.png)
Inside js folder create a folder called router inside router create a file called `index.js`
![routefile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t3z8cxw6by6obrlj3gd.png)
`in app.js`
![appjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jy94dp68fijzqjlub8vp.png) 
Here we import router and at bottom as we see write `app.use(router)`
`In App.vue`
![Appvue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvm693z6cc4bhgcfhlgp.png) 
Here to see all elements of router we need to write `<router-view />` so we can now see it on browser
![browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygtoyu83m8lrktt4bg7e.png)
***But there is a problem now**
![routefile2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn9enjpvo6isb4zap4mt.png)
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.
![404](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6mvuz0j10bf2kcdi61p.png)
Here the about route gives a 404 error. Quick fix here
`In routes/web.php`
`Route::get('/{any}', function () {
    return view('welcome');
})->where("any",".*");`
![webroutes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eat1oe390r9cugprbbv8.png)
Now we can see the route about works 
![browseraboutroutes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qffqo55kubg01lp3845z.png)
 **Installing Tailwind**
First go onto CLI and type `npm install -D tailwindcss postcss autoprefixer` now you can go to `package.json` file and see 
![autoprefixerpostcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1f9sx7fcgqd4mf65it0.png)
Then in CLI write `npx tailwindcss init -p` 
`in tailwind.config.js` 
![tailwindconfigjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11roswniy7z3jwv4j9l3.png)
Go onto resources `css/app.css` in `app.css` write 
![appcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2sd6xpuuql6tpgbfxd4.png)
Restart your npm terminal run `npm run dev` again
In `About.vue` if we see 
![aboutvue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fqk5v54wn9g764c2ob8.png)
If we see on the browser again 
![browserseeTailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m2z561f03m730oo5548.png)

So now we are done with installing Vue.vue-router and Tailwind in Laravel.