import { Component, Vue } from “vue-property-decorator” vs. import Vue from “vue”

Question

What's the difference and use cases between importing Vue from vue-property-decorator and vue ? What I understood I need to import Vue from vue-property-decorator always when defining a custom component with a @Component decorator, but are there any unexpected/different things/scenarios related to the Vue 's core which I should be aware when doing so?

Answer 1

I would say that there is no difference according to sources of vue-property-decorator .

vue-property-decorator just does the following:

import Vue, { PropOptions, WatchOptions } from 'vue'
// ...
export { Component, Vue, mixins as Mixins }

Possible that it is done to reduce number of imports in your code:

import {Vue, Smth1, Smth2}` from 'vue-property-decorator';

vs

import Vue from 'vue';
import {Smth1, Smth2} from 'vue-property-decorator';

Answer 2

Let's say you have a very simple module named 'some-module', in it you have:

var foo = 'bar';
export default foo;
export function helloWorld () { ... };

When you do:

import something from 'some-module';

you are only importing the default export of 'some-module'. In this case, it is the string foo. The default export can be anything, object, function, etc.

When you do:

import {helloWorld} from 'some-module';

You are specifically importing a member of 'some-module' named 'helloWorld' and not the default export. In this case, it is the function 'helloWorld'.

If you had done:

import {something} from 'some-module';

The 'something' would be 'undefined' since there is no export for with that name.

You can read more here