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.