Vue SPA(Single Page Application) with Laravel.
1. Installing Node
composer require laravel/ui "^1.0" --dev (For Laravel 6)
composer require laravel/ui:^3.2 (For Laravel 8)or
composer require laravel/ui --devor
COMPOSER_MEMORY_LIMIT=-1 composer require laravel/ui:^3.2 (problem dekhle(Memory size))npm install -f //Npm vul dekhaleN.B: Jodi wrong dekhai...laravel version onjai vuejs version install krte hobe.(composer require laravel/ui "^1.0")npm install
php artisan ui vue --auth
npm install && npm run devnpm install vue-router
#npm install is used to install the predefined node modules inside the package.json file
Run the following command to install frontend dependencies:
#npm install vue-router is used to install the vue-router which used to provide basic Vue Routing for the Vue components.
2. Folder Structure
resources
js
components
App.vue
Hello.vue
Home.vue
app.js
bootstrap.js3. resources/js/app.js
Replace the contents of the app.js file with the following:
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)import App from './components/App'
import Hello from './components/Hello'
import Home from './components/Home'const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});const app = new Vue({
el: '#app',
components: { App },
router,
});
we have imported the VueRouter, Vue, and all the Vue component routes.
App.vue (resources/js/components/app.vue)
<template>
<div>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'hello' }">Hello World</router-link>
</p> <div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>
Home.vue (resources/js/components/Home.vue)
<template>
<p>This is the homepage</p>
</template>Hello.vue (resources/js/components/Hello.vue)
<template>
<p>Hello World!</p>
</template>4.Routes
web.php
Route::get('/{any}', 'HomeController@index')->where('any', '.*');HomeController.php
public function index()
{
return view('home');
}welcome.blade.php
<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>Vue SPA Demo</title>
</head>
<body>
<div id="app">
<app></app>
</div><script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
5.Running the Application
npm run devnpm run watch //jotober change hobe compile hobe
This npm run watch command will listen for file changes and will compile assets instantly. You can also run this command npm run dev. It won’t listen for file changes.
