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.
Related
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.
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 having a Nuxt.js project where I try to use the qrcode-scanner library
I fallow the steps to register globaly.
I made a js file in plugins folder and add the fallowing code
import Vue from "vue";
import VueQrcodeReader from "vue-qrcode-reader";
Vue.use(VueQrcodeReader);
It looks pretty straight forward, but my app crashes and never loads. Anyone experienced this problem ?
i test your code and it works for me by the way i explain my steps for you, maybe you forget one step:
install package with npm install vue-qrcode-reader
make file named qr.js in my plugin folder
then put this code on it:
import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'
Vue.use(VueQrcodeReader)
add plugin to my nuxt.config.js file :
plugins: ['~/plugins/qr']
NOTE:qr is the name of my file(qr.js)
use the plugin in my vue page with adding following code in it's place:
<qrcode-stream></qrcode-stream>
<qrcode-drop-zone></qrcode-drop-zone>
<qrcode-capture></qrcode-capture>
I would like to use this component in my Vue app: https://commbocc.github.io/hcflgov-vue-esri-search/docs/
However it is throwing an error: TypeError: "t.$store is undefined"
I suspect the cause is that I am not using VueX, so I'm failing to initialise a VueX store that the component is looking for.
In general, is it possible to use a component that uses VueX if my app does not? Is there some way around this? I think the effort involved in incorporating VueX would be too high.
Yes you can. In most cases, people create vue-plugins. When doing that, you can install them like npm install myCoolPlugin and use them in your app by importing it: import myCoolPlugin from 'myCoolPlugin' and then depending of the plugin, you can either globally install it like vuex does:
Vue.use(myCoolPlugin)
or you can explicitly use the plugin's components as you wish directly where you are going to use them like so:
import {coolButton, coolInput} from 'myCoolPlugin';
export default {
name: 'home-page',
components: [coolButton, coolInput],
...
}
Plugins also have a package.json file that holds metadata about what that plugin depends on etc (just like your app). When you npm i myCoolPlugin, npm checks the plugin's package.json file to see what 3rd party packages the plugin depends on and then continues to install them in your app's node_modules.
The issue with your component "esri-search" is that it is not set up as a package/plugin. Therefore it will not install any dependencies it needs (like vuex, lodash etc...) in your app.
This is why you had to install vuex as a dependency to your app, because when you copy paste this component in to your app, it is not a plugin, it becomes your app.
Does this make sense? :)
It seems in this case I was able to solve that error like this:
npm install --save vuex
In main.js:
import VueX from 'vuex';
Vue.use(VueX);
This doesn't fully answer whether or not this would always be the case though, so open to better answers.
import CustomWidget from '#/components/widgets/CustomWidget';
When I import a Vue component. The Vue component works and all, but when I use # it cannot resolve the declaration (it gives me cannot find declaration to go to).
I have this problem on Vue application and nuxt applications.
I am using WebStorm 2018.2.2
For Vue-cli 3.x, you have to specify node_modules/#vue/cli-service/webpack.config.js as Preferences | Languages & Frameworks | JavaScript | Webpack value.
Resolving webpack aliases in Nuxt projects doesn't currently work, please follow WEB-32614 for updates