Hello my friend,

I'm using your package with Vue.js 3 and Laravel 8. When executing the npm run dev, the file undefined.js is generated. How to fix the problem ?!

Thanks!

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:

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

Thanks!

I created a fresh laravel project ran npm install

then followed the installation guide for laravel-mix-vue3 running these commands

npm install laravel-mix-vue3 --save-dev

npm install @types/webpack-env @vue/compiler-sfc [email protected] laravel-mix-vue3 --save-dev

then i update my webpack.mix.js file with

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

then I get an error

[webpack-cli] ReferenceError: File is not defined at S:\Eddie\dev\web\projects\vue\onegleam\node_modules\laravel-mix-vue3\index.js:63:44

I have tried starting afresh, creating a new laravel project and running all the command again an again but it sill gives me same error. for some reason theFile variable in index.js seems undefined

entry = [].concat(entry).map((file) => new File(file)); output = new File(output);

I really don't know what to do, am very confused as am trying vue for the first time.

Given that Vue 3 is supposed to be completely tree-shakeable, I was surprised to see that even a basic 'Hello World' test weighed in at a hefty 350 KiB after being built for production.

I've only imported the createApp method from "vue" and I've not used anything else... Is one of the loaders including the full build?

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.

I created a fresh laravel project ran npm install

then followed the installation guide for laravel-mix-vue3 running these commands

npm install laravel-mix-vue3 --save-dev

npm install @types/webpack-env @vue/compiler-sfc [email protected] laravel-mix-vue3 --save-dev

then i update my webpack.mix.js file with

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

then I get an error

[webpack-cli] ReferenceError: File is not defined at S:\Eddie\dev\web\projects\vue\onegleam\node_modules\laravel-mix-vue3\index.js:63:44

I have tried starting afresh, creating a new laravel project and running all the command again an again but it sill gives me same error. for some reason theFile variable in index.js seems undefined

entry = [].concat(entry).map((file) => new File(file)); output = new File(output);

I really don't know what to do, am very confused as am trying vue for the first time.

I'm watching the vuejs3 tag on stackoverflow which includes this question that shows some issues about installing vue 3 in laravel 8 project, as answer i suggested your module as solution, hopefully that would work and thanks for building this project.

I'm getting this error on running npm run dev on Windows system:

[webpack-cli] ReferenceError: File is not defined at C:\Users\MAX\rest_api\node_modules\laravel-mix-vue3\index.js:63:44 at Array.map () at Vue3.register (C:\Users\MAX\rest_api\node_modules\laravel-mix-vue3\index.js:63:30) at Object.components. [as vue3] (C:\Users\MAX\rest_api\node_modules\laravel-mix\src\components\ComponentRegistrar.js:133:53) at Object. (C:\Users\MAX\rest_api\webpack.mix.js:17:5) at Module._compile (C:\Users\MAX\rest_api\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19)

Project Dependencies

+-- @vue/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

router.js

import { createWebHistory, createRouter } from 'vue-router';

const Home = () =>
  import(
    /* webpackChunkName: "home" */
    /* webpackPrefetch: true */
    './views/Home.vue'
  );

const Accounts = () =>
  import(
    /* webpackChunkName: "accounts" */
    /* webpackPrefetch: true */
    './views/Accounts.vue'
  );

const Savings = () =>
  import(
    /* webpackChunkName: "savings" */
    /* webpackPrefetch: true */
    './views/Savings.vue'
  );

const Loans = () =>
  import(
    /* webpackChunkName: "loans" */
    /* webpackPrefetch: true */
    './views/Loans.vue'
  );

const Withdrawals = () =>
  import(
    /* webpackChunkName: "withdrawals" */
    /* webpackPrefetch: true */
    './views/Withdrawals.vue'
  );

const Maketers = () =>
  import(
    /* webpackChunkName: "maketers" */
    /* webpackPrefetch: true */
    './views/Maketers.vue'
  );

const Finances = () =>
  import(
    /* webpackChunkName: "finances" */
    /* webpackPrefetch: true */
    './views/Finances.vue'
  );

const Tithe = () =>
  import(
    /* webpackChunkName: "tithe" */
    /* webpackPrefetch: true */
    './views/Tithe.vue'
  );

const Settings = () =>
  import(
    /* webpackChunkName: "settings" */
    /* webpackPrefetch: true */
    './views/Settings.vue'
  );

  const NotFound = () =>
    import(
      /* webpackChunkName: "NotFound" */
      /* webpackPrefetch: true */
      './views/NotFound.vue'
    );

const routes = [
  {
    path: '/:catchAll(.*)',
    component: NotFound
  },
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/accounts',
    name: 'accounts',
    component: Accounts
  },
  {
    path: '/savings',
    name: 'savings',
    component: Savings
  },
  {
    path: '/loans',
    name: 'loans',
    component: Loans
  },
  {
    path: '/withdrawals',
    name: 'withdrawals',
    component: Withdrawals
  },
  {
    path: '/maketers',
    name: 'maketers',
    component: Maketers
  },
  {
    path: '/finances',
    name: 'finances',
    component: Finances
  },
  {
    path: '/tithe',
    name: 'tithe',
    component: Tithe
  },
  {
    path: '/settings',
    name: 'settings',
    component: Settings
  }
];


const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: () => ({
    y: 0
  }),
  linkActiveClass: '',
  routes,
});

export default router;

Compilation result:

 DONE  Compiled successfully in 342ms                                                                                                               4:51:21 AM

         Asset      Size        Chunks             Chunk Names
  /css/app.css   0 bytes  /js/app, mix  [emitted]  /js/app, mix
    /js/app.js  1.17 MiB       /js/app  [emitted]  /js/app
   NotFound.js  11.4 KiB      NotFound  [emitted]  NotFound
   accounts.js  11.4 KiB      accounts  [emitted]  accounts
   finances.js  11.4 KiB      finances  [emitted]  finances
       home.js  14.9 KiB          home  [emitted]  home
      loans.js  11.2 KiB         loans  [emitted]  loans
   maketers.js  11.4 KiB      maketers  [emitted]  maketers
    savings.js  11.3 KiB       savings  [emitted]  savings
   settings.js  11.4 KiB      settings  [emitted]  settings
      tithe.js  11.2 KiB         tithe  [emitted]  tithe
withdrawals.js  11.5 KiB   withdrawals  [emitted]  withdrawals
[Browsersync] Reloading Browsers... (buffered 8 events)

I'm trying to load a different Vue component on each Laravel route/view. In Vue 2 I would compile all components into a single app.js file, load a single vue app onto the root element in the Laravel blade template, and then each individual blade template would render an appropriate tag to load the correct component for that page.

However with Vue 3 I'm not sure how it should work. I'm guessing I need to NOT specify a template in the initial root element? Then what's rendered in the blade templates can be used instead. Does that mean I need a version of vue that supports runtime compilation as the templates can't be pre-compiled?

However when I do this I get this error:

const app = createApp({})
app.component('ft-header', require('./components/FtHeader.vue').default);
app.component('ft-register', require('./components/Auth/FtRegister.vue').default);
app.mount('#app');

[Warning] [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". (2) (app.js, line 1137)
" at <App>"

Is there a way to change the which version of Vue I'm using? Or am I barking up the wrong tree anyway?

I've been trying to use the extract support with v0.7, but end up with larger files. e.g.

mix.vue3("resources/js/app.js", "public/compiled/js")
	.postCss('resources/css/app.css', 'public/compiled/css', [
		require('tailwindcss'),
	])

produces

/compiled/css/app.css  5.74 KiB       2  [emitted]  mix
/compiled/js/app.js  78.7 KiB       0  [emitted]  /compiled/js/app

while

mix.vue3("resources/js/app.js", "public/compiled/js")
	.postCss('resources/css/app.css', 'public/compiled/css', [
		require('tailwindcss'),
	])
	.extract(['vue', 'axios'], 'public/compiled/js/vendor');

produces

   /compiled/css/app.css  5.74 KiB       3  [emitted]  mix
     /compiled/js/app.js  93.4 KiB       1  [emitted]  /compiled/js/app
/compiled/js/manifest.js  1.46 KiB       0  [emitted]  /compiled/js/manifest
  /compiled/js/vendor.js   101 KiB       2  [emitted]  /compiled/js/vendor

Any suggestions? or just wait until mix supports Vue3 by default?