KABBOUCHI / laravel-mix-vue3

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

Empty rendered #app #10

Closed Miosame closed 3 years ago

Miosame commented 3 years ago

Similar to #5 - however it does not work as described.

my blade template is essentially:

<div id="app">
    <test-component></test-component>
</div>

test.vue:

<template>
    <div>
        <input type="text" />
    </div>
</template>

app.js:

import { createApp } from 'vue'
const app = createApp({});
app.component('test-component',require('./components/test.vue'));
app.mount('#app');

webpack.mix.js:

const mix = require('laravel-mix');
require("laravel-mix-vue3");
mix.vue3('resources/js/app.js', 'public/js')

When I visit the blade template, it replaces all contents of #app with:

<div id="app" data-v-app=""><!----></div>

My package.json after the readme dependencies:

image

what am I missing or is this a laravel mix bug? (similar to #9 ?)

Thanks!

KABBOUCHI commented 3 years ago

I think you need the runtime version.

Add this to mix file

mix.webpackConfig({
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm-bundler.js' // or 'vue' : '...'
            },
        },
 })

I suggest to use Laravel Mix v6, I'll archive this repo soon.

Miosame commented 3 years ago

@KABBOUCHI v6 isn't yet tagged nor announced a release date, are you referring to the beta releases?

Miosame commented 3 years ago

As mentioned by Kabbouchi, just use beta-v6 of laravel-mix together with: js(...).vue()

pmochine commented 3 years ago

@Miosame could you please show me an example? I get the error:

[webpack-cli] Unknown argument: --no-progress
[webpack-cli] Unknown argument: --hide-modules
? Which flags do you want to use? … 
✔ --entry: The entry point(s) of your application e.g. ./src/main.js
✔ --config: Provide path to a webpack configuration file e.g. ./webpack.config.js
✔ --color: Enable/Disable colors on console
...... etc.

My settings are:

const mix = require('laravel-mix');
mix.js('demo/resources/js/app.js', 'demo/public/js/app.js').vue();

with npm "laravel-mix": "github:JeffreyWay/laravel-mix#v6.0.0-beta.10",

Miosame commented 3 years ago

@pmochine you need to remove --no-progress and --hide-modules from iirc the package.json, they are incompatible with newer versions.