Level 102
Hit f12 and check the console for errors. Or is it blank?
1 like
Jul 9, 2022
4
Level 1
How Vite is configured with Laravel and Vue. Blank Page
I'm trying to configure a project using Laravel 9 + Vita + Vue. I'm stuck in the same place with the blank page. I checked in the console and vue code is not loading. Trying differents, ways, set alias, update the apps.js, nothing works
"private": true,
"scripts": {
"dev": "vite",
"build": "vite bumpild && vite build --ssr"
},
"devDependencies": {
"@inertiajs/inertia": "^0.11.0",
"@inertiajs/inertia-vue3": "^0.6.0",
"@inertiajs/progress": "^0.2.7",
"@tailwindcss/forms": "^0.5.2",
"@vitejs/plugin-vue": "^2.3.3",
"autoprefixer": "^10.4.2",
"axios": "^0.25",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"tailwindcss": "^3.1.0",
"vue": "^3.2.31",
"vue-loader": "^16.8.3"
},
"dependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@popperjs/core": "^2.11.5",
"laravel-vite-plugin": "^0.3.0",
"madge": "^5.0.1",
"resolve-url-loader": "^5.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"survey-vue": "^1.9.38",
"vite":"^2.9.14",
"vue-template-compiler": "^2.7.4"
}
}
vite.config.js
export default defineConfig({
plugins: [
laravel(['resources/js/app.js']),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'@': '/resources/js',
vue: 'node_modules/vue/dist/vue.esm-bundler.js',
},
},
});
app.js
import './bootstrap';
import '../css/app.css';
import { createApp, h } from '/node_modules/vue/dist/vue.esm-bundler.js';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
createInertiaApp({
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
});
InertiaProgress.init({ color: '#4B5563' });
Level 1
@Sinnbeck No error, nothing in the console: console
[vite] connecting...
[vite] connected.
Elements
<div id="app" data-page="{"component":"Welcome","props":{"errors":{},"auth":{"user":null},"ziggy":{"url":"http:\/\/dreimmoapp.test","port":null,"defaults":[],"routes":{"ignition.healthCheck":{"uri":"_ignition\/health-check","methods":["GET","HEAD"]},"ignition.executeSolution":{"uri":"_ignition\/execute-solution","methods":["POST"]},"ignition.updateConfig":{"uri":"_ignition\/update-config","methods":["POST"]},"survey.index":{"uri":"dashboard","methods":["GET","HEAD"]},"survey.run":{"uri":"survey\/run","methods":["GET","HEAD"]},"register":{"uri":"register","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"password.request":{"uri":"forgot-password","methods":["GET","HEAD"]},"password.email":{"uri":"forgot-password","methods":["POST"]},"password.reset":{"uri":"reset-password\/{token}","methods":["GET","HEAD"]},"password.update":{"uri":"reset-password","methods":["POST"]},"verification.notice":{"uri":"verify-email","methods":["GET","HEAD"]},"verification.verify":{"uri":"verify-email\/{id}\/{hash}","methods":["GET","HEAD"]},"verification.send":{"uri":"email\/verification-notification","methods":["POST"]},"password.confirm":{"uri":"confirm-password","methods":["GET","HEAD"]},"logout":{"uri":"logout","methods":["POST"]}},"location":"http:\/\/dreimmoapp.test"},"canLogin":true,"canRegister":true,"laravelVersion":"9.19.0","phpVersion":"8.1.7"},"url":"\/","version":"de902d9b73e9ab8693281af7cca81941"}"></div>
1 like
Level 1
maybe vue: 'vue/dist/vue.esm-bundler.js',
Level 1
In .blade.php add
Please or to participate in this conversation.