Nuxt.js: import my own library

[tiagomatosweb]

Hi,
I have some js files with functions. I would like to import using build.vendor. How would I do it?
Cheers?

_{This question is available on Nuxt.js community (#c1153)}

[XiaoNode]

in nuxt.config.js, you can add config in build like:
build:{ vendor:[ '~/plugins/a.js' ] }

[tiagomatosweb]

That what I did, but the variable is not available, like
build:{ vendor:[ 'axios' ] }

Inside of my page

mounted() {
            console.log(axios);
        },

Got error
ReferenceError: axios is not defined

Do I still need to import axios in the component?

[KonstantinVlasov]

Do I still need to import axios in the component?

Sure you need:

import axios from '~/plugins/axios'

[tiagomatosweb]

So what is the benefit to insert in build.vendor? Didn't get it!

[KonstantinVlasov]

to reduce the size of the app bundle
https://nuxtjs.org/api/configuration-build#vendor

[tiagomatosweb]

Well, it would be the same if I just import axioes normally as usual? Sorry, got confused with this.
Do you know any article that explains it more?

[antfu]

A simplified example:

With build:{ vendor:[ 'axios' ] }

dist/
    nuxt.bundle.hash.js # your app code
    vendor.bundle.hash.js # "axios" bundled in here
    ...other files

Without

dist/
    nuxt.bundle.hash.js # "axios" bundled with app code
    ...other files

The build.vendor option is meant for splitting vendor code to another bundle in order to reduce the size of the app bundle.

[KonstantinVlasov]

Also, it's useful when you deploy new version of your app, vendor.bundle will be the same (if you don't add new libs) and user don't need to download vendor.bundle again. So only small nuxt.bundle will be downloaded.

[tiagomatosweb]

Now makes sense! Thank you very much everyone!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.