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

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?

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2LP28rq
via IFTTT