How to install Vue js in Laravel

Vue.js is a progressive JavaScript framework that is used for building user interfaces and single-page applications.

It is similar to React in that it uses a component-based architecture. However, Vue.js differs from React in that it uses a template-based approach that makes it easier to reason about the structure of your application.

In this tutorial, we will be using Laravel and Vue.js 2.

Before we get started, make sure you have the following installed on your machine:

- Laravel 6

- Node.js

- npm

- Composer

Now let's get started!

1. Create a new Laravel project

In your terminal, run the following command:

laravel new vue-install

2. Navigate to your project

Next, navigate to your project's directory:

cd vue-install

3. Install Vue.js

Now we can install Vue.js using npm:

npm install vue

4. Create a new Vue component

Next, we need to create a new Vue component. We will place this component in the resources/js/components directory.

In your terminal, run the following command:

touch resources/js/components/ExampleComponent.vue

Now open this file in your text editor and add the following code:

        <h1>Hello, world!</h1>
<script> export default { } </script>

5. Register your component

Next, we need to register our component in the resources/js/app.js file.

Open resources/js/app.js and add the following code:

import Vue from 'vue'
import ExampleComponent from './components/ExampleComponent.vue'

Vue.component('example-component', ExampleComponent)
const app = new Vue({ el: '#app', });

6. Include the Vue component in your view

Finally, we need to include our Vue component in our view. We will do this in the resources/views/welcome.blade.php file.

Open resources/views/welcome.blade.php and add the following code:

<!DOCTYPE html>
<html lang="en">
 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head>
 <div id="app"> <example-component></example-component> </div> <script src="/js/app.js"></script></body>

And that's it! You have successfully installed Vue.js in Laravel.

Vue js
install vue js in laravel