CODEWITHSUNDEEP
javascriptvue.jsvue-component
Henrik Ormåsen
Henrik Ormåsen

Reputation: 880

mixin of Method in Vue from other file

I would like to share an method in Vue between files. I have tried different suggestins (after googeling) without getting it to work. I got mixin working in the same file - but not with import from other file.

This is working (just after import part under script tag):

// import ipsecMixin from '../shared'
   var ipsecMixin = {
     methods: {
       IpsecKodeRemote: function(
         [kode here...]
          ....
    export default {
       name: 'MurSerit',
       props: {
         ....
       },
       mixins: [ipsecMixin],
       computed: {

But then I try to move the code to an external file (and import as you see in the part commented out in the example above):

var ipsecMixin = {
  methods: {
   IpsecKodeRemote: function(
     [kode here...]
export { ipsecMixin }

I get component error.

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in render: "TypeError: Cannot read property 'components' of undefined"

found in

---> <Modl2l> at src/components/Modl2l.vue
   <Form> at src/components/Form.vue
     <HelloWorld> at src/components/HelloWorld.vue
       <Home> at src/views/Home.vue
         <App> at src/App.vue
           <Root>

Why, and how to solve it?

Upvotes: 1

Views: 3688

Answers (2)

Yoarthur
Yoarthur

Reputation: 917

You need to export the ipsecMix as something e.g a const.

external file

export const ipsecMixin = {
  methods: {
   IpsecKodeRemote: function(
     //code here...

Upvotes: 1

Mike Harrison
Mike Harrison

Reputation: 1393

If you are exporting explicit variables like this:

export { ipsecMixin }

You will also need to import it as a variable:

import { ipsecMixin } from '../shared'

You can also use default import/export like so:

// in shared.js
export default ipsecMixin = {
  methods: {
    IpsecKodeRemote: function(){},
  }
}

// in your component file
import myIpSecMixin from '../shared'

Notice how in the default import/export you can name the import whatever you want but when exporting explicit variable names you must also reference it as the same name.

You may want to take a look at how to use es6 imports here

Upvotes: 2

Related Questions