Laravel VueJs Setup Create First Vue Component with Laravel

by

Want to learn Basic Laravel Vuejs Setup? so today, in this post we are going to share how to create first Vue component with vue.js in laravel app. Here we create a vue component and show it laravel welcome page.

In laravel first we saw welcome page. So we need to create a js component like welcome page, but vue component is created in resources directory. Vue with laravel we need to install vue npm how below checkout step by step how to create vue component and show in laravel welcome page. Ready to work vue component with laravel..

Laravel Vuejs Setupe Create First Vue Component with Laravel

Step 1: Install Node Modules

More then JavaScript libraries we need to install npm. Laravel Mix is redor our js and css file to one file where we want to rendor it, here we use Node and npm to create a convenient solution for carrying out otherwise tedious tasks such as CSS and JavaScript compilation.

To initialising webpack.mix .js we need to run the npm install command, which installed the Node packages identified in the package.json file. If you open package.json you’ll see the Vue package is included in this list. Below command to run npm and then you can check in your package.json file one package is installed. 

npm install --unsafe-perm

After successful installation of node modules, you can see the new directory named “node_modules” at the root of your application. This directory contains all the necessary modules.

Here you can check in you resources/js directory a app.js file created. Here you need to add blow code.

resources/assets/js/app.js

require('./bootstrap');
import Vue from 'vue';
window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app'
});

This app.js file is load the bootstrap.js module (resources/assets/js) directory,  jQuery, the Bootstrap jQuery plugins, ensuring Laravel’s CSRF token is passed as a header when making AJAX requests, and optionally loading Laravel’s Echo API.

This file loads Vue module, example component creatively named ExampleComponent.vue which is found in the resources/assets/js/components directory. To showing example component in laravel welcome page we need to create two files one which is rendor id=app and other is show the component design.

Step 2: Create Your First Vue Component

Basically more then cases Laravel includes a simple an Vue example component in our resources/js/component directory. But in case there is not showing any component then we need to create component folder in resources/js directory and create new ExampleCompoent vue comonent and add below code on it.

resources/js/components/ExampleComponent.vue

<template> 
    
<div class="container">
    <div class="row">
       <div class="col-md-8 col-md-offset-2">
           <div class="panel panel-default">
               <div class="panel-heading">Example Component</div>
                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

To creating vue compoent we use <template><div….</div><template> to render our file. The <template> tag defines the widget’s HTML. The <script> tag defines the component’s logic.

Even novice JavaScript developers are probably wondering how the ExampleComponent.vue file is going to be executed in the browser since it is not valid JavaScript. We’re going to use Laravel Mix to compile the Vue code into standard JavaScript.

Step 3: Create Blade Files to Showing Vue Component

no create folder layouts named app.blade.php, placing it in your project’s resources/views/layouts directory and add blow code on it.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
  <div id="app">
    <main class="py-4">
        @yield('content')
    </main>
  </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

This layout defines the Vue root element (#app). Any referenced Vue components must be placed inside this element. We’ll reference the example component inside a view which we’ll create in just a moment. now create  add blow code in your welcome.blade.php file.

resources/views/welcome.blade.php

@extends('layouts.app')
@section('content')
<template>
  
<div class="flex-center position-ref full-height">
       <div class="content">
          <example-component></example-component>
      </div>
</div>

</template>
@endsection

Compiling the Vue Js Component

Now open your terminal and run below command to running your component.

npm run watch

The npm watch command compile our modules and other JavaScript code imported by the app.js file, and save the results to /public/js/app.js.

Learn Also: Laravel 8 Vue Js CRUD Example Tutorial Single Page Application

Now you work is over you can check your first vue component is showing laravel welcome page. I hope you enjoy to creating you first vue component with laravel app. If you have any query or any question please comment below.

Leave a Comment