Unable to import Mixin from Single File Component in Vue.js

Question

I am using Laravel with Vue.js and Webpack / Laravel Mix. I have Single File Components which should make use of Mixins. The folder structure looks like this:

/app.js
/vue-components/Component.vue
/mixins/api/common.js

common.js defines a mixin like so:

export default {
   // all content goes here
}

And when I import it from app.js and console.log it, it shows the data:

import industries from "./mixins/api/common";
console.log(industries); // this shows the content
Vue.component(
    'some-component',
    require("./vue-components/Component.vue")
);

Within Component.vue I use mixins: [ industries ], and that gives me the following error:

Component.vue?bb93:73 Uncaught ReferenceError: industries is not defined

Question 1: Is it not possible to declare mixins globally and reference them from within a component?

To solve the issue I tried importing the mixin directly within the component instead of the global app.js file. But import industries from "./mixins/api/common"; within Component.vue throws the following error while trying to compile with npm run:

This relative module was not found:

* ./mixins/api/common in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"babel-plugin-syntax-dynamic-import","webpack-async-module-name"],"env":{"development":{"compact":false}}}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/vue-components/Component.vue

Question 2: If I have to import the mixin from within the Single File Components, what should the path look like?

tony19 · Accepted Answer · 2022-07-15 22:50:01Z

2

As in Vue Document, You can declare mixin globally

//- build your mixin
const mixin = {
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
}

Vue.mixin(mixin)


new Vue({
  myOption: 'hello!'
}) 
// "hello!"

You can also import mixin to use for each component.

In above your Component.vue, import path is not correct. You should do import industries from "../mixins/api/common"

edited Jul 15, 2022 at 22:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 1, 2018 at 13:15

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthias S Over a year ago

thank you! My import path being incorrect was really stupid. Thank you.

Collectives™ on Stack Overflow

Unable to import Mixin from Single File Component in Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related