Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vue 3 extract not working

See original GitHub issue

Laravel Mix Version: 6.0.10
Node Version: v15.0.1
NPM Version: 7.0.3
OS: Mac OS Catalina 10.15.6
Vue Version: 3.0.2

Description:

Laravel Mix can`t extract vue3 from to vendor file

Steps To Reproduce:

resources/js/test.js

import { createApp } from 'vue'
import swiper from 'swiper'

window.createApp = createApp
window.swiper = swiper

webpack.mix.js (First case)

const mix = require('laravel-mix')

mix.js('resources/js/test.js', 'public/static/pub/js/test.min.js')
    .extract(['vue', 'swiper'])
    .vue({version: 3, runtimeOnly: true})

In this case only swiper library is extracted to vendor.js file

/static/pub/js/manifest.js │ 1.05 KiB
/static/pub/js/test.min.js │ 64.2 KiB
/static/pub/js/vendor.js   │ 55.2 KiB

webpack.mix.js (Second case)

const mix = require('laravel-mix')

mix.js('resources/js/test.js', 'public/static/pub/js/test.min.js')
    .extract(['vue'])
    .vue({version: 3, runtimeOnly: true})

In this case nothing is extracted to vendor.js file

/static/pub/js/manifest.js │ 1.05 KiB
/static/pub/js/test.min.js │ 118 KiB
/static/pub/js/vendor.js   │ 139 bytes

webpack.mix.js (Third case)

const mix = require('laravel-mix')

mix.js('resources/js/test.js', 'public/static/pub/js/test.min.js')
    .extract()
    .vue({version: 3, runtimeOnly: true})

In this case swiper and vue libraries are extracted to vendor.js file

/static/pub/js/manifest.js │ 1.05 KiB
/static/pub/js/test.min.js │ 178 bytes
/static/pub/js/vendor.js   │ 116 KiB

How to extract only vue library to vendor.js file?

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

adriaanzoncommented, Mar 1, 2022

It’s because under the hood, Vue 3 breaks up their library into several packages which are stored under the @vue namespace, e.g. @vue/reactivity, @vue/runtime-dom. By using .extract(['@vue']), you’re extracting all the code that is stored under node_modules/@vue.

For completeness you could also use .extract(['vue', '@vue']), but I don’t think the amount of code stored in node_modules/vue is significant.

0reactions

GiftHealthJonHartleycommented, Mar 1, 2022

Great to know. Thank you!

Top Results From Across the Web

Vue 3 extract not working · Issue #2777 · laravel-mix ... - GitHub

It's because under the hood, Vue 3 breaks up their library into several packages which are stored under the @vue namespace, e.g. @vue/reactivity ......

Vue not loading when using extract() in Laravel Mix

extract() to the end in my webpack. mix. js, everything compiles successfully but Vue doesn't load at all in the browser. Remove the...

Vue not loading when using extract() in Laravel Mix-Vue.js

Coding example for the question Vue not loading when using extract() in ... mix.extract() (without arguments) splits the usual app.js into three files....

Features | Vite

Use the Type-Only Imports and Export syntax to avoid potential problems like type-only imports being incorrectly bundled, for example:.

Vue and Web Components - Vue.js

When setting props on a custom element, Vue 3 automatically checks DOM-property presence using the in operator and will prefer setting the value...