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:
<template>
<div>
<h1>Hello, world!</h1>
</div>
</template>
<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">
<head>
<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>
<body>
<div id="app"> <example-component></example-component> </div> <script src="/js/app.js"></script></body>
</html>
And that's it! You have successfully installed Vue.js in Laravel.