Laravel: How to use Vue JS Scaffolding

How to use Vue Js with Laravel Vue Scaffold

This tutorial shows you how to use the Laravel vue js scaffold for the UI scaffoldings for bootstrap, vue and react.

Learn how to start a new Laravel project


How to use custom domain name with your laravel application

after the above step of setting up a project run this below commands to use the ui from laravel 

composer require laravel/ui
php artisan ui vue

Install your vue application

npm install

Now to use your frontend library you have to link the script from the welcome.blade.php  so replace your welcome.blade.php with these below.

<!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Laravel</title><!-- Fonts --><link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet"></head><body class="antialiased"><div id="app"><example-component></example-component></div><script src="{{ asset('js/app.js') }}"></script></body></html>

The example component there is just a way of using custom components. You can create more and register them from the app.js resources\js\app.js 

/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */require('./bootstrap');window.Vue = require('vue');/** * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */// const files = require.context('./', true, /\.vue$/i)// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))Vue.component('example-component', require('./components/ExampleComponent.vue').default);/** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */const app = new Vue({    el: '#app',});