search

KABBOUCHI / laravel-mix-vue3

A Laravel Mix extension for Vue 3, Typescript and JSX.
23 stars 2 forks source link

How to actually use? #5

Closed ipearx closed 3 years ago

ipearx commented 3 years ago

I've been struggling to figure out how to actually use Vue 3 in Laravel 8 using this plugin.

What I've done:

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.

KABBOUCHI commented 3 years ago 
// ./App.vue
<template>
  <h1> My App </h1>
</template>
// ./app.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')
ipearx commented 3 years ago

You're a legend, thanks!

I managed to get My App rendered. And then added the component to App.vue, and it worked. For anyone else wondering what it looks like:

require('./bootstrap');

import { createApp } from 'vue'
import App from './components/App.vue'

const app = createApp(App)

app.component('helloworld', require('./components/HelloWorld.vue').default);

app.mount('#app')