I've been struggling to figure out how to actually use Vue 3 in Laravel 8 using this plugin.
What I've done:
- Installed Laravel 8 fresh project
- Installed the extension as per instructions
- Installed Vue 3
- Tried to get a simple hello world component working.
My package.json looks like this:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@types/webpack-env": "^1.15.3",
"@vue/compiler-sfc": "^3.0.0",
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"laravel-mix-vue3": "^0.6.0",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"vue": "^3.0.0",
"vue-loader": "^16.0.0-beta.8",
"vue-template-compiler": "^2.6.12"
}
}
My webpack.mix.js looks like this:
const mix = require('laravel-mix');
require("laravel-mix-vue3");
mix.vue3("resources/js/app.js", "public/compiled/js")
.postCss('resources/css/app.css', 'public/compiled/css', [
//
])
.extract(['vue', 'lodash', 'axios'], "public/compiled/js/vendor")
My app.js file looks like this:
require('./bootstrap');
window.Vue = require('vue');
const app = Vue.createApp();
app.component('helloworld', require('./components/HelloWorld.vue').default);
app.mount('#app');
My welcome.blade looks like:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>Title</title>
</head>
<body>
<div id="app">
<helloworld></helloworld>
</div>
<script type="text/javascript" src="/compiled/js/manifest.js"></script>
<script type="text/javascript" src="/compiled/js/vendor.js"></script>
<script type="text/javascript" src="/compiled/js/app.js"></script>
</body>
</html>
It successfully compiles, but gives the error in the browser console:
'TypeError: undefined is not an object (evaluating 'component.render')'
I also get a browser warning:
[Warning] You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details. (app.js, line 22738)
I think I want tree shaking, but no idea how/where to configure it.
A bit more of an example in the docs would be very helpful for an amateur like myself? Any help appreciated.