What is the proper way to incorporate a standalone Vue library into a Vue application?

Question

What is the proper way to incorporate a standalone Vue library into a Vue application?

I'm currently facing an issue with integrating a vue component library into my vue application. This component library is loaded by a script tag and is set up with webpack using the externals setting to exclude vue dependencies. Therefore, the host bundle that is using this library needs to include vue and other necessary dependencies. The component library is built using vue cli with the script

vue-cli-service build --target lib

to generate a lib.umd.js file. In the index.html of my host bundle, I include this file using a script tag. The webpack configuration of the host bundle uses

config.externals(['@test/my-component-library'])

to exclude the external component library. In my host bundle, I import and use the component library like this:

import { MyComponent } from '@test/my-component-library'

However, when I run my application, I encounter the error message:

Uncaught SyntaxError: Invalid or unexpected token

. This error seems to be originating from the following line in my host bundle:

/*!*******************************************************!*\
  !*** external "@test/my-component-library" ***!
  \*******************************************************/

Could someone please explain why webpack is generating this code and suggest possible solutions to resolve this issue?

javascript vue.js webpack

Answer 1

Answer №1

After some troubleshooting, I managed to figure out the solution. Initially, the issue lied in an incorrect configuration for the externals setting. The correct setup should look like this:

config.externals({
  '@test/my-component-library': {
    root: '@test/my-component-library',
    commonjs2: '@test/my-component-library',
    commonjs: '@test/my-component-library',
    amd: '@test/my-component-library',
  },
})

Additionally, in the component library, I had to include a webpack configuration

config.output.library('MyComponentLibrary')

to ensure that the object MyComponentLibrary is globally accessible in the window scope. Following that, I had to eliminate the import statement from the host bundle. In order to register the component, I had to incorporate this line into my vue file:

components: {
  'MyComponent': MyComponentLibrary.MyComponent,
}

However, a new challenge emerged. The component library itself relies on vuetify, which is another component library. Despite adding vuetify to the externals option because it was already present in the host bundle, I started encountering numerous Unknown custom element errors. It appears that my component library is unable to locate the vuetify components within the host bundle. Any recommendations on how to resolve this issue?

Answer 2

After some troubleshooting, I managed to figure out the solution. Initially, the issue lied in an incorrect configuration for the externals setting. The correct setup should look like this:

config.externals({
  '@test/my-component-library': {
    root: '@test/my-component-library',
    commonjs2: '@test/my-component-library',
    commonjs: '@test/my-component-library',
    amd: '@test/my-component-library',
  },
})

Additionally, in the component library, I had to include a webpack configuration

config.output.library('MyComponentLibrary')

to ensure that the object MyComponentLibrary is globally accessible in the window scope. Following that, I had to eliminate the import statement from the host bundle. In order to register the component, I had to incorporate this line into my vue file:

components: {
  'MyComponent': MyComponentLibrary.MyComponent,
}

However, a new challenge emerged. The component library itself relies on vuetify, which is another component library. Despite adding vuetify to the externals option because it was already present in the host bundle, I started encountering numerous Unknown custom element errors. It appears that my component library is unable to locate the vuetify components within the host bundle. Any recommendations on how to resolve this issue?

What is the proper way to incorporate a standalone Vue library into a Vue application?

Answer №1

Similar questions

Leverage JavaScript Object Properties within Angular 5 Components

Insert a hyperlink button using InnerHtml

Are there more efficient methods than having to include require('mongoose') in each models file?

AngularJS Element Connections

a single function spread across two controllers[JavaScript]

Obtain specific fields from a multidimensional array object using lodash

Alert displayed on console during transition from MaterialUI lab

Jasmine and Karma encountered a TypeError stating that the function this.role.toLowerCase is not valid

Creating Unique Identifiers in ExpressJS

Can anyone offer me advice on troubleshooting a failed Capifony deployment caused by a time out during the assetic:dump process?

Update the pageExtensions setting in Next.js to exclude building pages with the file extension .dev.

Having difficulty installing 'node-sass' on Ubuntu 20

What is a way to transfer an Object from one Vue.js component to another without relying on vuex?

Ways to activate JavaScript on a completely dynamic AJAX ASP.NET website

general structure used to activate every page in vue 3

Adding the Setting component to the Style Manager

Guide to embedding bootstrap.min.js into ember-bootstrap extension

Unable to scroll after the webpage redirects

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

Is Cloud Spanner effectively handling session management?

What is the proper way to incorporate a standalone Vue library into a Vue application?

Answer №1

Similar questions

Leverage JavaScript Object Properties within Angular 5 Components

Insert a hyperlink button using InnerHtml

Are there more efficient methods than having to include require('mongoose') in each models file?

AngularJS Element Connections

a single function spread across two controllers[JavaScript]

Obtain specific fields from a multidimensional array object using lodash

Alert displayed on console during transition from MaterialUI lab

Jasmine and Karma encountered a TypeError stating that the function this.role.toLowerCase is not valid

Creating Unique Identifiers in ExpressJS

Can anyone offer me advice on troubleshooting a failed Capifony deployment caused by a time out during the assetic:dump process?

Update the pageExtensions setting in Next.js to exclude building pages with the file extension *.dev.*

Having difficulty installing 'node-sass' on Ubuntu 20

What is a way to transfer an Object from one Vue.js component to another without relying on vuex?

Ways to activate JavaScript on a completely dynamic AJAX ASP.NET website

general structure used to activate every page in vue 3

Adding the Setting component to the Style Manager

Guide to embedding bootstrap.min.js into ember-bootstrap extension

Unable to scroll after the webpage redirects

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

Is Cloud Spanner effectively handling session management?

Update the pageExtensions setting in Next.js to exclude building pages with the file extension .dev.