CODEWITHSUNDEEP
vue.jsvuejs3
Alexandre Dubé
Alexandre Dubé

Reputation: 2829

How to serve VueJS 3 Hello World application as a lib?

I'm using:

Using CLI, I setup the "hello world" app and tried to build it using the lib target using:

npx vue-cli-service build --target lib --name helloworld ./src/components/HelloWorld.vue --mode production

The build works fine and produces content in the ./dist directory. Visiting it from a regular HTTP server I was expecting the demo.html file to render the component properly but it didn't. A JS error is thrown:

Uncaught ReferenceError: vue is not defined

The console warns that Vue is running in development mode, but CLI is supposed to be in production mode by default. Am I missing something?

I'm trying VueJS for the first time and try to understand how to produce a library out of components that could then be used in other projects.

Upvotes: 0

Views: 497

Answers (1)

tony19
tony19

Reputation: 138216

Vue CLI 4.5.13 does not create Vue 3 compatible demos. For instance, version 4.5.13 still uses Vue 2 initialization in demo.html. Version 5.x fixes this.

Install @vue/cli 5.x instead to create Vue 3 libraries (@next is currently 5.0.0-beta.3):

npm i -g @vue/cli@next

The console warns that Vue is running in development mode, but CLI is supposed to be in production mode by default. Am I missing something?

The library build externalizes vue by default (it's not bundled with the library). Instead, demo.html pulls it in from CDN:

<script src="https://unpkg.com/vue"></script>

That resolves to https://unpkg.com/[email protected]/dist/vue.js (the latest version as of today), which is a development build. If you prefer the production build, change the src URL to the minified build:

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

Upvotes: 1

Related Questions