DEV Community 👩‍💻👨‍💻

Tanzim Ibthesam
Tanzim Ibthesam

Posted on

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

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
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');

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

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

Top comments (2)

randomcommentor profile image
RandomCommentor • Edited on

Good tutorial, but app.use(router) has to come before app.mount('#app') or none of the views will render.

tanzimibthesam profile image
Tanzim Ibthesam Author

Thanks for your feedback

🌚 Life is too short to browse without dark mode