I'm using typescript with Vue. And for this specific use case, I'd like to export multiple items from my .vue file. Like this:

// FooBar.vue

<template>
    ...
</template>

export class Foo extends Vue {
    foo: string = "foo";
}

export const Bar = {bar: "bar"};

And then import them like this:

// Baz.vue

import { Foo, Bar } from 'FooBar.vue';

@Components({ components: { Foo }})
... // rest of the code

Is there a way to export multiple objects from a .vue file in Vue?

I'm using typescript with Vue. And for this specific use case, I'd like to export multiple items from my .vue file. Like this:

// FooBar.vue

<template>
    ...
</template>

export class Foo extends Vue {
    foo: string = "foo";
}

export const Bar = {bar: "bar"};

And then import them like this:

// Baz.vue

import { Foo, Bar } from 'FooBar.vue';

@Components({ components: { Foo }})
... // rest of the code

Is there a way to export multiple objects from a .vue file in Vue?

• javascript
• typescript
• vue.js
• vuejs2
• es6-modules

1 Answer 1

In your vue file write:

class Foo extends Vue {
    foo: string = "foo";
}

const Bar = { bar: "bar" };

export { Bar };
export default Foo;

You will then be able to import these using:

import Foo, { Bar } from 'FooBar.vue';

More detailed information on how export works can be found here.