Vue library with vuetify dependencies

2
votes

I need to make a reusable packageable vue component and upload it to npm for my own use in different projects. Am also using vuetify for the styles. And am building it with vue-cli-service.

When I test the component with npm run serve (using the vue cli) works but once i transpile it and use it in other libraries, doesn't works correctly.

What I need is to know if there is any way of creating vue libraries with vuetify dependencies.

Code sandbox of project:

https://codesandbox.io/s/optimistic-glade-j9icu?file=/package.json

Code sandbox to test the transpiled libraries

https://codesandbox.io/s/fast-pond-cs6l9?file=/src/plugins/vuetify.js

Repository:

https://github.com/Tauromachian/v-number-stepper.git

Any information would be helpful, I used vue-cli-service as it appears to be the easiest choice but am willing to change to rollup or webpack.

4
vue.jsnpmvue-componentvuetify.js
So what part are you having trouble with? – AlexMA
@AlexMA When i build it and import it in other projects it does'nt work right. It's imported but is'nt rendered right. – jogarcia
Maybe try building an example in codesandbox? Not sure how else anyone will be able to help with that much info unless they build an app from scratch, figure out how your library works, import it, and then try to debug it. – AlexMA
@AlexMA you are right, i just was expecting this to be something well defined in the community the kind of things professionals do daily – jogarcia
Did you read this articles? vuetifyjs.com/en/getting-started/quick-start/#vue-cli-install - VUE CLI presets cli.vuejs.org/guide/plugins-and-presets.html#presets – Ezra Siton

4 Answers

3
votes

I have written a publicly available NPM package that extends Vuetify (see v-stripe-elements on npm). I also wrote a detailed series of blog posts on how to do it yourself including how to set up your dev environment, wrestle with TypeScript, and publish. Also available:

Hopefully this will kickstart your development process! I think the project template alone should save you quite a bit of time and effort.

2
votes

Your package.json file is specifying the same file for both the main and module tags. I suspect the problem here is that you're using import on a common.js (CJS) module. It works in a single project because you're importing the .vue file from components rather than the exported module, so you're testing something very different in the single case.

The module entry is optional but exists to allow you to specify a common.js module (i.e. require() compatible) for the main entry point, and an ESM module (i.e. import) for the module entry.

You've provided the same file for both, and a common (cjs) module isn't going to be importable via the module entry.

You don't have an ESM variant in your dist folder, but you do have a UMD file, which supports both. So it should be compatible with import, which means you could specify it for the module: field in the package.json file.

Try changing:

  "main": "dist/v-number-stepper.common.js",
  "module": "dist/v-number-stepper.common.js",

to:

  "main": "dist/v-number-stepper.common.js",
  "module": "dist/v-number-stepper.umd.js",

To produce an actual ESM module for imports, see this page which is really the Vue bible on the standard process for this. It's a different process though, with rollup.

You'll need to publish and pick it up again (unless you're first testing all this with npm link in the lib, and npm link v-number-stepper in the main project as I suggested in my other answer).

See this page for info on the package.json fields for CJS and ESM, and this page for info on CJS and UMD. Also this page for info on npm link, which will save time if you do something like this a lot.

0
votes

If you copy all of the code of your package.json in another Vue project you could use npm install, the CLI will automatically download all of your dependencies.

0
votes

I don't see a problem having an external package that has a Vuetify dependency, as long as when you put the pieces together you don't load more than one Vue instance. Doing so leads to the problem in this Vuetify Issue (links directly to the key answer comment, but see also the question at the top, which I asked about).

The primary way to avoid multiple instances if Vue being loaded is to use:

import Vue from 'vue'

with no path in the import package, no specific filename (like the Common JS or ESM versions, and to avoid conflicts between the Vue runtime that has the compiler vs the one without).

Then if you import it just as 'vue' then you can define what file you get in your webpack config (as in that Issue above) or similarly if you are using something like rollup.

It looks like that is how you're loading it in both main.js files in your codepens.

Also, you didn't really ask about this but you do not need to publish your dependency library on NPM, if you have both git repos local. You can just use npm link in the library project and then npm link (name) in the main project, and that will effectively add the library as if you had just added it from NPM normally. See the npm link command documentation for the details.