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.
Related
I made a fairly simply Quasar component library using Vite.
npm install avvinue-clowder
However, I'm now unable to get it to work as intended within other Quasar apps.
For example if I do:
import { AVRow } from 'avvinue-clowder'
and use it within the template:
<AVRow>Foobar</AVRow>
I get the following error:
I think its because Quasar doesn't get exported with the components. Anyone know how to do that?
Here is my repo: https://github.com/RizaHKhan/clowder/tree/master/src for reference.
Note:
I know this library works because the exports that are pure Javascript, work fine. Its just the Quasar based components that throw errors.
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'm creating a Bootstrap Vue application (built with Vue CLI), and there's a Javascript library I want to be able to utilize: https://nadchif.github.io/html-duration-picker.js/. I tried putting the file in /assets and then using import in the script portion of App.vue (import './assets/html-duration-picker.min'), but I have not been able to get the script to work, not sure why (nothing happens, no duration picker shows). As an alternative, I thought I could maybe simply load the library in the traditional way in the head of index.html. But I'm not clear what the src URL should be for a file in the assets directory. Or should it be in the assets/public directory?
Honestly, you might as well use the npm package, if you are using Vue CLI, to save yourself a lot of trouble:
npm i html-duration-picker
DOCUMENTATION.md is where the installation instructions lie. While there aren't any for Vue, there are instructions for Angular, and it's fairly easy to get it working for Vue.
Just import html-duration-picker:
import * as HtmlDurationPicker from "html-duration-picker";
...and initalize it in mounted():
mounted() { HtmlDurationPicker.init() }
You can also run HtmlDurationPicker.refresh(); to "update dynamically loaded input boxes." I don't think this is necessary if you use v-model to bind the boxes' values to data properties which update fine from either end.
Here's a sandbox you can check out for more info.
If you do want to import it manually from assets, though, then what you're doing is probably fine (though you might need to add the .js to then end of the path); you'll just have to initialize it.
I'm trying to test if validation works for a form with vee-validate and vue-test-utils. I also use nuxt and have created a custom plugin which install vee-validate and provides two custom computed properties as a mixin.
The problem is that I need a way to use these mixins within a localVue instance, however, I cannot just import the whole file as it results in vee-validate being installed two times on the main vue instance. I also cannot just say localVue.use(MyCustomVeeValidatePlugin) because the plugin doesn't have an install method ("plugins" in nuxt are somewhat different than in vue).
What works is creating a file which exports isFormValid and isFormChanged and then have the plugin import these methods. Then I also need to import these methods in the test file and create a mixin for the localVue instance. I would much rather prefer defining the mixin in a single plugin file. I know this is very specific but has anyone had a similar problem? I could imagine rewriting the plugin to be more like it is defined in the Vue.js docs (with an install method) and install it somehow.
Plugin:
import Vue from "vue";
import VeeValidate from "vee-validate";
Vue.use(VeeValidate);
//create global mixin for checking if form is valid
//note: every input element needs a name
Vue.mixin({
computed: {
isFormValid() {
return Object.keys(this.fields).every(key =>
this.fields[key].valid);
},
isFormChanged() {
return Object.keys(this.fields).some(key =>
this.fields[key].changed);
}
}
});
As far as I know, based on the recommendations I read in "Testing VueJs Applications (https://www.manning.com/books/testing-vue-js-applications), the author, who is also the main author of the vue-test-utils recommends:
I’ve already spoken about why you should use a localVue constructor and avoid installing on the base constructor. This is especially important for Vue Router. Always use a localVue to install Vue Router in tests. You must make sure that no file in your test suite imports a file that calls Vue.use with Vue Router. It’s easy to accidentally import a file that includes Vue.use. Even if you don’t run a module, if the module is imported, then the code inside it will be evaluated.
Based on that recommendation, I moved Vue.use() calls out of files like store.js and router.js and into main.js, which isn't used during testing.
I think this is a config issue related to keeping store in an npm-linked folder.
I made a vue-cli 3 project and got the “counter” example running (from https://github.com/vuejs/vuex/tree/dev/examples/counter)
Works: When I move the store.js to an installed node_modules package (and update its import url) it continues to work.
Breaks: When I move the store.js to an npm linked node_modules package it compiles and dev tools finds the store, but I get a blank screen and console error: Property or method “$store” is not defined on the instance but referenced during render
It also works properly with a linked package if I build the minimized js (npm run build). Is there a config setting I'm missing?
The problem turned out to be that the linked packages had its own node_modules folder. I think that may have resulted in webpack creating 2 instances of Vue and attaching the linked package to the 2nd instance.
Deleting the depended upon package's node modules and letting webpack / vue-cli run at the root level resolved my problem.
I realize this question is ridiculously old, but I ran into this exact issue. As deleting node_modules isn't a valid solution, here's what actually worked.
In the library you're importing into your main app, edit your package.json file.
You want to move Vue to be a peer dependency.
"dependencies": {
"vue": "^3.0.0" // move this
},
Move "vue" here.
"peerDependents": {
"vue": "^3.0.0"
},
This will cause your library to use the instance of Vue utilized by your main vue app. As the accepted answer states, this issue is indeed caused by each package loading its own Vue instance. The issue happens because reactivity is bound to the Vue instance. As each library gets its own instance, this creates a situation where reactivity isn't properly tracked between the instances.
I found the solution to this in the Vuejs git repo at https://github.com/vuejs/vue-cli/issues/4271