1 | initial version |
composer create-project --prefer-dist laravel/laravel my-project-name
cd my-project-name
npm install vuetify
npm install -D vite
client
in the project root directory for the Vue.js code:
mkdir client
Create a new file named vite.config.js
in the project root directory and add the following code to enable Vue.js with Vite:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
In the client
folder, create a new file named main.js
and add the following code to activate Vuetify:
import { createApp } from 'vue';
import App from './App.vue';
import 'vuetify/dist/vuetify.min.css';
import { createVuetify } from 'vuetify';
const vuetify = createVuetify({
theme: {
themes: {
light: {
primary: '#4CAF50',
secondary: '#9C27b0',
accent: '#8c9eff',
error: '#b71c1c',
},
},
},
});
createApp(App).use(vuetify).mount('#app');
In the client
folder, create a new file named App.vue
and add the following code:
<template>
<v-app>
<v-main>
<router-view></router-view>
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
</style>
In the client
folder, create a new file named router.js
and add the following code to enable Vue Router:
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "about" */ './views/Home.vue'),
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
In the client
folder, create a new file named views/Home.vue
and add the following code:
<template>
<h1>Home</h1>
</template>
<script>
export default {
name: 'Home',
};
</script>
<style>
</style>
In the client
folder, create a new file named views/About.vue
and add the following code:
<template>
<h1>About</h1>
</template>
<script>
export default {
name: 'About',
};
</script>
<style>
</style>
Modify the webpack.mix.js
file in the project root directory to add the Vite build process, Vuetify stylesheet and Vue.js libraries:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
devServer: {
proxy: 'http://localhost:8000',
watchFiles: ['client/**/*'],
open: true,
},
})
.vuetify('vuetify-loader')
.vue({ version: '2.6.14' })
.version();
npm run dev
http://localhost:3000/
to view the running Laravel 9 project utilizing Vuetify and Vite.