How can I fix "You are running Vue in development mode" when building a Web Component?

user_862545 0
Viewed 1946

I'm building a Web Component with VueJS, for which is very hard to find documentation online, besides a couple blogs with basic examples, using the following command that I found in the CLI's help screen:

vue-cli-service build --mode production --target wc --name creador-publico src/views/CreadorPublico.vue

(I'm forcing mode to production even tho it supposedly defaults to production)

... But no matters what I do, I keep getting:

error

The command creates an HTML file and 2 JS, one minified and one not, and I have tried with both of them and got the same result.

I'd love to find good documentation for Vue web components, but it appears to be non existent.

shadow-dom web-component vue.js javascript
2 Answers

The message occurs based on how you are including Vue in the page, not because of anything in the web component itself.

When you build the web component with the --target wc option it creates a sample demo.html file that looks like this:

<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>

<!-- use in plain HTML, or in any other framework -->
<my-element></my-element>

https://unpkg.com/vue points to a development build of Vue.

Changing this line to point to a minified version of Vue will remove this message from the console, e.g.:

https://unpkg.com/browse/vue@2.6.12/dist/vue.min.js

user_21716900

Use Vue.config.productionTip = false; before your initial new Vue instantiation.

user_41118620
Related