How to install Vue JS in Laravel 7

Here we will learn about Laravel 7 and Vuejs Basic Setup.

Steps

    1. Install nodejs from this site https://nodejs.org/en/.Download .msi file suppose node-v13.8.0-x64.msi .Install it in a normal way. (once if you installed already on your pc or system please skip)
    2. Suppose you have a Laravel install project. ( For Laravel install) (skip if u did)
    3. check for node js install or not in your Laravel project. Write the following lines in your Terminal
      1. node v
      2. npm v
    4. Since we are using Laravel version 7, hence to install Vuejs with Laravel, we have to install ‘Laravel UI Composer Package‘ first, for that run following line on the Terminal
    5. After installing the above package, you can scaffold vuejs in two ways with auth or without auth hence
    6. run following any one line on the Terminal which u need  without auth

      or with Auth 
    7. run following in the Terminal


              How to use Vusjs in Laravel

    8. In welcome.blade.php

      here we create a div with an id called ‘app

      src=”{{ asset(‘js/app.js’) }}” is referring public/js/app.js file and similarly href=”{{ asset(‘css/app.css’) }}” is referring public/css/app.css file

    9. but in public folder there is no app.js or app.css to compile these files we have to run in the Terminal

      which will make sure that your changes js file or Vue file will reflect instantly in your browser. now if recheck public folder you will files these app.js and app.css files

    10. in resources/js/app.js

      here the first line we are importing bootstrap, then the second line we are importing Vuejs and available globally with window.Vue, after that we create a global component called example-component which includes the resources/js/components/ExampleComponent.vue content or data and const app we are initiating Vue instance using the new keyword and referring id ‘app‘ el:’app’ which we add in a div in welcome.blade.app and

    11. in welcome.blade.app we include app.js. In app.js we create instance and component.In view we are using this component by writing <example-component></example-component> . here both files are working simultaneously
    12.  in resources/js/components/ExampleComponent.vue

       

      in browser

 

 

 

Share with:


Comments are closed.