Is there any better way or importing mixins in vue.js

Question

I have many mixins created in my project and right now what i do is i will import all the mixins in mixins/index.js files and in any components or pages wherever required i'll just import those mixins from mixins/index.js.

Now i doubt if doing show will i import all the unwanted mixins as well or will just import the mixins files i use?

Let's say i have these mixims created and imported in mixins/index.js

import a from 'mixins/a.js'
import b from 'mixins/b.js'
import c from 'mixins/c.js'
import d from 'mixins/d.js'
import e from 'mixins/e.js'

export {
  a,
  b,
  c,
  d,
  e
}

Now lets say in my 'x' components i will import 'a' mixins.

import { a } from 'mixins/index.js'

export default {
  mixins: [a]
}

In this case i only need 'a' mixins in my 'x' components but since i'm importing from mixins/index.js where i have all static imports of all mixins will this load unwanted mixins as well?

The answer, is it depends on the setup. It shouldn't load unused mixins, but it can. — Estus Flask
– Estus Flask, Commented Jul 14, 2021 at 10:55
@EstusFlask Can you explain a bit in what cases it can load all unwanted mixins as well? and what setup of such can cause this to happen? Right now i'm working on nuxt js and all the config is default setup there is nothing special done in the setup. — Amar Ratna Shakya
– Amar Ratna Shakya, Commented Jul 14, 2021 at 11:07
It depends on Webpack setup that Nuxt uses internally then. I'd expect it to be ok but this isn't something that is guaranteed. The thing that affects this is called tree shaking. If it goes wrong, unused things end up in the bundle. Tree shaking usually only happens in prod builds so you can expect dev builds to be big for several reasons including this one. — Estus Flask
– Estus Flask, Commented Jul 14, 2021 at 11:36

Boussadjra Brahim · Accepted Answer · 2021-07-14 10:43:30Z

2

import { a } from './mixins' will import only the requested module but if you do :

import * as mixins from './mixins'

then

mixins:[mixins.a]

this will import all the modules as explained here

answered Jul 14, 2021 at 10:43

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

5 Comments

Amar Ratna Shakya Over a year ago

Sorry i think i made a bit mistake in my code snipped it should be import from 'mixins/index.js' not 'minxins/a.js'

Boussadjra Brahim Over a year ago

I fixed that and also you should have a path like ./mixins or ../mixins

Amar Ratna Shakya Over a year ago

So it means i can use the way i mentioned right? use import in mixins/index.js and only use the mixins i required in a component and in that case it will only load the mixins that is required to be used right?

Boussadjra Brahim Over a year ago

Yes you're right import {moduleName} from 'mixins/index.js' will load only the imported module

Estus Flask Over a year ago

import * as mixins will import only ones in use, it doesn't differ from import { a } in a way it works, at least if tree shaking works ok and mixins object isn't used directly.

Amar Ratna Shakya · Accepted Answer · 2021-07-14 10:53:19Z

1

You con do something like this, import all the minmins files and than export your minmin files in the index, like this:

index.js

import a from '../mixins/a.js'
import b from '../mixins/b.js'
import c from '../mixins/c.js'
import d from '../mixins/d.js'
import e from '../mixins/e.js'

export {a, b, c, d, e}

then in your component, you can import a specific module exported in the index in this way:

x component

import {a, b} from "../mixins"

in this way you import only what you need and not all the index.js modules

edited Jul 14, 2021 at 10:53

Amar Ratna Shakya

5881 gold badge6 silver badges22 bronze badges

answered Jul 14, 2021 at 10:49

RootAtKali

1851 silver badge14 bronze badges

Collectives™ on Stack Overflow

Is there any better way or importing mixins in vue.js

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related