I am updating myself and my skills and I decided to start learning Vue during this pandemic.
I'm creating a small component library that implements the UIkit framework for personal use and I have released an npm package to be able to use the components in various projects easily.
To do this, I have used this tutorial: https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/ and I have successfully created an npm package that once installed in my project with the npm install <packageName> command gets installed in the node_modules folder with the following folder structure:
-packageFolder
---dist
----- packagename.esm.js
----- packagename.min.js
----- packagename.ssr.js
---src
-----lib-components
-------Component1.vue
-------Component2.vue
-------Component3.vue
---package.json
I have managed to globally import the package using import 'componentName' from 'packagename'; but now I'm facing the following errors:
Any clue about what's happening? Thank you!
It is important to refer that I am learning and using Vue 3.
Thank you very much for your help!
Regards,
T.
Related
I've been working on an npm repo; creating Vue-isolated components and publishing them as npm packages. Therefore there isn't a global App, so each package will have its own configuration (package.json, vite.config, etc). I was trying to create a Histoire folder where I can add my packages, but I'm getting errors all the time. I guess I'm not doing the proper config.?
I'm not sure how to make it work. I will appreciate some help here.
I made a reproduction of the error on Stack Blitz, you need to
npm run story:dev
https://stackblitz.com/edit/vitejs-vite-9ebma3?file=histoire/histoire.config.js
Thanks!
I want to use an Vue package like this
Vue.use(npmPackageName)
but when I import vue form 'vue' this message appear "Can’t resolve vue"
my question is how can I use npm package in the administration component?
thanks a lot.
this is the npm_modules folder
and this is the webpack.config.js file
here is how i try to import and use it
Yes, you can.
You have to add the package to your own module's package.json and the build-administration.sh would install the dependencies.
This works only, if jq is installed on your system - otherwise a warning is printed which can be overseen easily.
I am using a third party component (vue-image-lightbox) which currently has a bug. I cloned the repo and made the change and want to deploy it with my app to see if it fixes the issue. To do this I installed yalc.
In the component project (vue-image-lightbox) I ran
npm run build
yalc publish
My understanding is that this places my vue-image-lightbox into the yalc store.
Next, I went to my dependent project and ran
npm uninstall vue-image-lightbox (remove the existing component)
yalc add vue-image-lightbox. This creates
a) .yalc directory with the deployed component
b) adds entry to package.json : "vue-image-lightbox": "file:.yalc/vue-image-lightbox",
run npm install to pick up any dependencies
After this I ran my app and went to the component that uses vue-image-lightbox. In the console I not get the warning
"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
All of the registration code works without issue with the git installed component. I don't understand why I see this when I try to use yalc.
The component is registered locally with
import LightBox from 'vue-image-lightbox'
components: { LightBox }
I would love to know what is different about the yalc installed component that is causing this issue. Is there a better way to test out patches on third party components other than yalc?
Thanks!
I was told by the project manager at the company I work for to take all the global components of a vue project we're working on and turning them into a single npm package that anyone working on the project can import and start using. essentially I have to take the global components and turn them into a component library like vuetify which is installed using npm and than imported from node modules directory.
I was wondering if you guys could point me in the right direction on how to achieve this. thanks in advance.
So, regardless of the implementation, the main thing you need is following this guide on how to create an npm package
https://docs.npmjs.com/creating-and-publishing-private-packages
Then
You create an src folder.
In the src, you will create a folder named "components" with all your -duh- components.
In the src folder, you will also create an index.js file, from there you will export your components.
export { default as VDataTable } from './components/VDataTable.vue'
// ...etc
Option1
If you use a bundler for your projects, and you know by a fact that all your codebases will use a bundler, you can simply create a folder with a package.json.
In your package.json then you will
"module": "src/index.js",
"main": "src/index.js"
In this scenario, you are letting your main project bundler (which is using the package) transpile all the packages for you, (babel, single file components)
Option 2
In case you have absolutely no clue of the nature of the projects which can use your library you will need a bundler for your components.
An example can be Rollup.
I suggest these 2 guides.
https://rollupjs.org/
https://rollup-plugin-vue.vuejs.org/
Long story short, Rollup will transpile for you the files you requested (js and css), and you will have to make them available from your package.json
"module": "src/dist/library.esm.js",
"main": "src/library.common.js"
And then you can release your package. Possibly privately or you might get fired :P
I'm using the standard Svelte template with Rollup and have not been able to successfully import Paper.js.
I installed paper via:
npm install paper
and I get this output trying to do npm run dev after importing Paper:
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
acorn (guessing 'acorn')
Acorn is a dependency of the paper-full.js disto, and I'm looking to map
import { paper } from "paper";
to paper-core.js (although it would be very cool to get PaperScript from the full distro working in Svelte, but that's likely a whole other can of worms).
I'm wondering what kind of Rollup config I would need to add to resolve this.
Here's the repo I'm working on if you'd like some more context or a quick way to jump to exactly where I'm at.
UPDATE: Got it working! I had forgotten to install acorn as a dependency. I also switched to installing them both as devDependencies since rollup bundles everything. -- solution credit to Antony in the Svelte Discord