Bundling components for Nuxt.js

[LeCoupa]

What problem does this feature solve?

I am building a design system for dark interfaces: https://github.com/LeCoupa/vuedarkmode

I am currently using bili and rollup-plugin-vue to bundle the package. I can't use it on Nuxt without initialising it in a plugin and putting ssr to false. I have tried compiling it with { template: { optimizeSSR: true } } but I get the following errors multiple times in the browser console:

e._ssrEscape is not a function
e._ssrNode is not a function

How can I fix that?

[simllll]

My findings & my solution for it:

• There are two problems I guess

1. the ssr style renderer uses for example atob() which is not a node method
2. there is no way to tell the module to export something different on the client and on the server side. Therefore one lib file must work everywhere. Which is not the case. (https://github.com/vuejs/rollup-plugin-vue/tree/master/cookbook/ssr does not work with rollup-plugin-vue > 1.x)

• I tracked my issue down to the style inclusion part. I got an error like document is undefined due to this line:

var HEAD = document.head || document.getElementsByTagName('head')[0];
^ ReferenceError: document is not defined at ...

therefore I disabled "inline" CSS vie vue plugin and used uglify to strip this "relevant" part out (I guess it's uglfify doing this, not tested it). To get css woring tough, i extract it with "css" plugin. I'm using a plugins config like this now:

plugins: [
        node({
          extensions: ['.js', '.jsx', '.vue']
        }),
        common(),
        css(), // <<--- add css()
        vue({
          css: false, // <--- set css to false for vue
          compileTemplate: true,
          template: {
            isProduction: true
          }
        }),
        postcss({
          plugins: [
            autoprefixer()
          ]
        }),
        replace({
          'process.env.NODE_ENV': JSON.stringify('production')
        }),
        buble({
          objectAssign: 'Object.assign'
        })
      ].concat(config.plugins || [])

see also https://github.com/vuejs/rollup-plugin-vue/tree/master/cookbook/extract-css

this created an additional css files, which I included in the package.json as "style" property.

hope this helps someone,
if anyone has more insights on this, please let me know.

regards
simon

Thanks @simllll for the walkthrough, I ran into the same issue.

I'm wondering how do you import the extracted CSS in a Nuxt application with the component? Do you need to have an explicit @import statement for each component (with postcss-import for example) or are you using another method?

Cheers

[simllll]

Hi @indrwkpaas,
Good question ;) I'm still kind of struggling with this, right now I just include the css with import and a preprocessor inserts it. But there are some more problems with this, I'm using purgecss for example, which removes unused css. And because the selectors are not used in my code,but in the plug-in code it strips them away too. you can overcome this manually, but still not a "real" solution.

If you find a better way, just let me know!

Regards
Simon
Ps.: It could be worth looking into the ssr render component/function which is used when you set optimizeSSR to true (I'm on my phone,not sure what's the exact parameter and term of this ;))

[SumNeuron]

Please, please please someone stick this on an easy to find documentation page somewhere.
I tried with my own little experience https://gitlab.com/SumNeuron/nuet to bundle a component and a store (with arrow functions and async await), and then use it in a sandbox. It worked, so I thought it would be worthwhile, but today when I copy-paste and tried again with something new it did not work, until this css trick above.

Someone, please, make rollup and vue (+ ecosystem, e.g. ssr for nuxt, vuetify, axios, etc) better

[znck]

We have added an example for building component libraries with rollup-plugin-vue: https://rollup-plugin-vue.vuejs.org/examples.html#component-library. I will try to improve the guide and could use all the help here.

I would love to have more contributions to rollup-plugin-vue, it deserves some love from the Vue community. I try to do my best but often I get busy with work or life and it goes unseen for weeks.

[LeCoupa]

For newcomers, I ended up using vue-sfc-rollup. It has fixed all the issues I had for my library vuedarkmode.