Vue: extended global Vue cannot use its own plugins

Created on 8 Mar 2018  ·  4Comments  ·  Source: vuejs/vue

Version

2.5.13

Reproduction link

https://jsfiddle.net/b5a1zh6u/31/

Steps to reproduce

just open this simple use case: https://jsfiddle.net/b5a1zh6u/31/
you will see an error in console.

What is expected?

As written in this issue, Vue.extend()
does not work as expected.
The code should create a new global Vue instance and installa a plugin that is used by the component template.

What is actually happening?

console error due to $t method not found.


I wrote the reproduction fiddle starting from Evan's one

if I set the $t function directly or as a plugin, on the global Vue like this, it works:

Vue.prototype.$t = val => `* ${val}`
improvement

Most helpful comment

It was my mistake assuming this would work in the previous comments. To make it fully operate as a base constructor, an additional internal flag needs to be set to true. This cannot be made the default for Vue.extend, so it will likely be exposed via a public API in 2.6.

All 4 comments

Just to bring more precision, the plugin seems to install the method $t only on the root component. Any child component cannot access the method $t.

Example: https://jsfiddle.net/j34b5g30/41/

This differ if we use the plugin directly on the global instance before extending vue.

Example: https://jsfiddle.net/r2stwc4h/2/

It was my mistake assuming this would work in the previous comments. To make it fully operate as a base constructor, an additional internal flag needs to be set to true. This cannot be made the default for Vue.extend, so it will likely be exposed via a public API in 2.6.

In 3.0 we are going to rethink how the global API works to avoid some of the problems caused by the global APIs mutating the root Vue object. For testing purposes, libraries like vue-test-utils has provided workarounds like createLocalVue. For now we are not going to introduce another API that is likely to be obsolete in 3.0.

Just to confirm, is there a way around this in Vue 2? Or is a solution only available in 3?

Was this page helpful?
0 / 5 - 0 ratings