Laravel with Vue.js – Build Modern Web Applications (Step-by-Step Guide)
Laravel
with vue
Command
composer create-project laravel/laravel example-app
npm install
npm install vue@next vue-router@4 @vitejs/plugin-vue
file structure:
set vite.config.js after plugings:
resolve: {
alias: {
vue: "vue/dist/vue.esm-bundler.js",
},
},
welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
@vite(['resources/js/app.js'])
@routes
<meta charset="UTF-8"
/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>hi</h1>
<router-view></router-view>
</div>
</body>
</html>
router.js file
import { createRouter, createWebHistory
} from 'vue-router'
import Test from '../Components/Test.vue';
const routes = [
{ path: '/test', component:
Test, name: 'test' }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
app.js
import '../css/app.css'
import './bootstrap'
import { createApp } from 'vue'
import router from './router/index'
// default export
const app = createApp({})
app.use(router)
app.mount('#app')
web.php file
Route::get('/', function () {
return view('welcome');
});
// Route according to vue router
Route::get('/{vue_capture?}', function
() {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');
Simple vue file for check
<template>
<div>
<h1>Hi, I am
from Test.vue</h1>
</div>
</template>
<script>
export default {
name: 'Test'
}
</script>
No comments