The Boilerplate Laravel 9.x and Vue 3.x, Download it and happy coding let's create great app.
-
Clone or Download
Paste code below into terminal and make sure where it downloaded.
git clone https://github.com/nnivxix/laravue.git
-
Enter to the folder laravue
cd laravue -
Open your favorit code editor or IDE.
example opeing Visual Studio Code
code .
If you wondering how to install Vue inside Laravel, first thing you have install package vue, @vitejs/plugin-vue and vue-loader
npm i vue vue-loader @vitejs/plugin-vue then setup vue and create vue file
|--resources
|----js
|------app.js
|------App.vue
|---..
|vite.config.js// app.js
import './bootstrap';
import { createApp } from 'vue';
import app from './App.vue';
createApp(app).mount("#app");<!-- App.vue -->
<template>
<h1>
hello laravue
</h1>
<ul>
<li>hei</li>
<li>hello</li>
</ul>
</template>Setup config of Vite
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; // add plugin
export default defineConfig({
plugins: [
vue(), // add this
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});and finally create attribute <div id="app"> and special syntax blade @vite'resources/js/app.js')
<!-- welcome.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">
<title>Laravel</title>
</head>
<body class="antialiased">
<div id="app">
</div>
@vite('resources/js/app.js')
</body>
</html>don't forget to set env variable APP_URL
APP_URL=http://localhost:8000running the server and BOOOM.