CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Daniel Santos
Daniel Santos

Reputation: 15778

How to use a VueJS .vue component in a HTML page without a WebPack build process?

I am creating a page for a legacy server rendered project.

On one of its page I need to add some "dynamic". Then i import the vuejs CDN script and created a inline vue object

var v = new Vue(...

But there is a .vue component that I like very much and I would like to add it to the page. But it seems that this component can only be added by a WebPack import and build process.

How can I use this component in my html page without WebPack build process? Is that possible?

Upvotes: 3

Views: 1737

Answers (1)

Marco Pantaleoni
Marco Pantaleoni

Reputation: 2539

You can use poi as described in this article:

poi build Component.vue --format cjs

You can also use vue-cli 3 (beta) and the necessary global addon:

npm install -g @vue/cli
npm install -g @vue/cli-service-global
# or
yarn global add @vue/cli
yarn global add @vue/cli-service-global

vue build Component.vue

Use vue build --help to get options and the help text. But be aware that this generates production minified code with an app and vendor bundle (which includes vue).

See also this old answer to a similar question, mentioning the use of the previous build command in vue-cli 2.8.x

Upvotes: 1

Related Questions