A Laravel Mix extension for Vue 3, Typescript and JSX.

Overview

Laravel Mix v5 - Vue 3

A Laravel Mix extension for Vue 3, Typescript and JSX.

Deprecated use Laravel Mix v6

Usage

First, install the extension.

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

//or

yarn add laravel-mix-vue3 -D

Make sure to install the below if Laravel Mix failed to install them

npm install @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3  --save-dev
// or
yarn add @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3 -D

Then, require it within your webpack.mix.js file, like so:

Basic

const mix = require("laravel-mix");

require("laravel-mix-vue3");

mix.vue3("resources/js/app.js", "public/js");

Enable Typescript

const mix = require("laravel-mix");

require("laravel-mix-vue3");

mix.vue3("resources/js/app.ts", "public/js", {
  typescript: true,
});

Enable JSX

const mix = require("laravel-mix");

require("laravel-mix-vue3");

mix.vue3("resources/js/app.jsx", "public/js", {
  jsx: true,
});

Enable TSX

const mix = require("laravel-mix");

require("laravel-mix-vue3");

mix.vue3("resources/js/app.tsx", "public/js", {
  typescript: true,
  jsx: true,
});
Comments
  • Generate undefined.js

    Generate undefined.js

    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!

    config result

    opened by larsurilch 6
  • Empty rendered #app

    Empty rendered #app

    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!

    opened by Miosame 5
  • Getting a [webpack-cli] ReferenceError: File is not defined - Laravel 8

    Getting a [webpack-cli] ReferenceError: File is not defined - Laravel 8

    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 vue-loader@next 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.

    opened by eddiedane 2
  • Bundle size

    Bundle size

    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?

    opened by craigrileyuk 2
  • How to actually use?

    How to actually use?

    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.

    opened by ipearx 2
  • Getting a [webpack-cli] ReferenceError: File is not defined

    Getting a [webpack-cli] ReferenceError: File is not defined

    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 vue-loader@next 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.

    duplicate 
    opened by eddiedane 1
  • Use vue 3 with laravel

    Use vue 3 with laravel

    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.

    opened by boussadjra 0
  • ReferenceError: File is not defined

    ReferenceError: File is not defined

    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)

    opened by dankomax 1
  • Dynamic Imports causes an empty css compilation

    Dynamic Imports causes an empty css compilation

    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)
    
    opened by seewhy17 4
  • Runtime compilation version of Vue?

    Runtime compilation version of Vue?

    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?

    opened by ipearx 5
  • Extract support?

    Extract support?

    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?

    opened by ipearx 3
Releases(0.6.0)
Owner
Georges KABBOUCHI
Lead Developer @Instadapp | Full-Stack Developer & Freelancer
Georges KABBOUCHI
TSX (JSX for TypeScript) support library for Vue

vue-tsx-support TSX (JSX for TypeScript) support library for Vue ⚠️ BREAKING CHANGES If your project already uses vue-tsx-support v2, see Migration fr

null 501 Mar 9, 2023
Automatically imports createElement as h when writing JSX and functional syntax that supports only setup() and template refs that supports setup()

babel-preset-vca-jsx Support for automatic import of createElement as h and setup functional component syntax and setup template refs Feature Automati

lululuffy 73 Aug 24, 2022
JSX Syntactic Sugar Plugin for Vue Functional Components

DEPRECATED: Check https://github.com/vuejs/jsx instead JSX Functional Components for Vue JSX This babel plugin adds some syntactic sugar to JSX. Usage

Nick Messing 66 May 26, 2022
Jsx-runtime for vue 3

vue-jsx-runtime-examples vue-jsx-runtime examples

doly mood 1 Apr 8, 2022
Vue 3 jsx runtime support.

vue-jsx-runtime Vue 3 jsx runtime support. The background https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html . With new jsx ru

doly mood 10 Dec 2, 2022
CSS encapsulation solution for Vue JSX

babel-plugin-vue-jsx-scoped-css ?? CSS encapsulation solution for Vue JSX About This plugin is used to implement the css scoped effect of template in

minfive 2 Mar 20, 2021
JSX for Vue 3

Babel Plugin JSX for Vue 3.0 To add Vue JSX support. English | 简体中文 Installation Install the plugin with: npm install @vue/babel-plugin-jsx -D Then ad

vuejs 1.5k Jan 3, 2023
Babel preset for transforming Vue JSX.

babel-preset-vue Babel preset for all Vue plugins. Install npm install -D babel-preset-vue CDN: UNPKG Usage In your .babelrc: { "presets": ["vue"] }

vuejs 85 Dec 19, 2022
babel plugin for vue 2.0 jsx

babel-plugin-transform-vue-jsx Babel plugin for Vue 2.0 JSX Babel Compatibility Notes If using Babel 7, use 4.x If using Babel 6, use 3.x Requirements

vuejs 1.8k Dec 3, 2022
Shrimpit 🍤 is a small CLI analysis tool for checking unused JavaScript, JSX & Vue templates ES6 exports in your project.

Shrimpit ?? Shrimpit is a small CLI analysis tool for checking unused JavaScript, JSX & Vue templates ES6 exports in your project. Install npm npm i -

Davy Duperron 260 Nov 29, 2022
Event modifiers syntactic sugar for JSX

Event Modifiers for JSX DEPRECATED: Check https://github.com/vuejs/jsx instead This babel plugin adds some syntactic sugar to JSX. Usage: npm i babel-

Nick Messing 45 Aug 31, 2021
JSX Syntactic Sugar Plugin for v-model

DEPRECATED: Check https://github.com/vuejs/jsx instead JSX v-model for Vue JSX This babel plugin adds some syntactic sugar to JSX. Usage: npm i babel-

Nick Messing 154 Feb 28, 2022
A babel plugin that provides jsx syntax for vue3

vue-next-jsx This project has been archived because Vue will have an official version. Vue Next JSX Explorer A babel plugin that provides jsx syntax f

Chunyang Huo 89 Aug 11, 2022
Support template modifiers (.sync, .capture, etc) in JSX

babel-plugin-vue-jsx-modifier Support template modifiers (.sync, .capture, etc) in JSX Overview In Vue template, we can use some modifiers. See: .sync

null 5 Jan 28, 2023
vue prop typescript

Prop type definition of Vue3. only recommended for typescript.

LvXiaoBu 4 Jul 27, 2022
A simple Vue 3 plugin for handling browser cookies with typescript support

A vue 3 plugin for handling browser cookies with typescript support. Load and save cookies within your Vue 3 application

Anish George 44 Nov 23, 2022
TypeScript preset for Babel 7.x supporting Vue.js components written in TS

babel-preset-typescript-vue TypeScript preset for Babel 7.x supporting Vue.js components written in TS. A drop-in replacement for @babel/preset-typesc

Paweł Gabryelewicz 21 Aug 18, 2022
Support for TypeScript's path mapping in Vite

vite-tsconfig-paths Give vite the ability to resolve imports using TypeScript's path mapping. Usage Install as dev dependency Inject vite-tsconfig-pat

Alec Larson 663 Jan 7, 2023
A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API.

?? vue-concurrency Inspired by ember-concurrency. A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition

Martin Malinda 268 Dec 26, 2022