This single file Vue component is import-able into any Vue application
The src/components/MyComponent.vue
defines a component that is reusable across Vue apps by merely importing into a Vue app like this:
import MyComponent from 'gjrd-vuex-component';
export default {
components: {
'my-component': MyComponent
}, ...
You can use it inside a Vue template like this:
<template>
<div id="app">
<my-component :mydata="backendData" :callback="mycallback"></my-component>
...
</div>
</template>
You can pass a JSON object of data as the mydata
prop. You can also pass it a callback
prop that points to a function that will be called @click
of a button inside the component.
The component looks like this:
This component uses these styles that can be included inside the Vue app wherever this component is used, or included as a separate CSS file.
<style>
.mycomponent {
border: 1px solid red;
width: 500px;
}
.button {
background-color: #4caf50;
border: none;
color: #fff;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
-webkit-transition-duration: .4s;
transition-duration: .4s;
cursor: pointer
}
.button1 {
background-color: #fff;
color: #000;
border: 2px solid #4caf50
}
.button1:hover {
background-color: #4caf50;
color: #fff
}
</style>
To build this component you must use Vue Cli 3 and use a "library" as the build target. Follow these steps to build it:
-
In your
package.json
file define the following:"name": "gjrd-vuex-component", "main": "./dist/gjrd.common.js", "version": "0.1.0", "files": [ "dist/*", "src/*", "public/*", "*.json", "*.js" ], "scripts": { "build-bundle": "vue-cli-service build --target lib --name gjrd ./src/components/MyComponent.vue", ... },
- "name" is the unique name for your component that will be published to the NPM registry
- "main" is the path to the main built file that will be published to NPM
- "version" is the version number that should change everytime you re-publish the component
- "files" are the types of files you want to publish to NPM. Usually we will want to publish just the "dist/*"
- "scripts" should include a new script as shown where you define target = lib, and a name that includes a PREFIX (like gjrd) and the path to the component to build
-
Run the script to build the component:
npm run build-bundle
- Create an NPM user and login
- Be sure there is no "private" property defined in your package.json
- Adjust the "version" as needed in your package.json
- At terminal run
npm publish
- Go online to npmjs.org and see your new published component. For example, https://www.npmjs.com/package/gjrd-vuex-component
Normally a Vue component must live inside a Vue app to be able to bootstrap it and show it on the screen. As part of the source code, you will see a very simple Vue app that bootstraps the MyComponent.vue
. One thing the component must have in common with the hosting parent app is the basic structure of the Vuex store, in terms of modules and shared properties, as described below.
Another way to develop a single file component is to use Vue Cli 3's "Instant Prototyping" feature.
In either case, you will need to specify the path to the source file you want to build inside the package.json, as in the build-bundle
.
In order for this component to be able to share a Vuex store & modules with the parent Vue app, you must duplicate both the directory structure of your store
and reference the same shared state property, in this example sharedVuex
.
The sharedVuex
property and getters/setters must also exist in the parent Vue app.
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Order from '@/store/modules/order'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
order: Order
}
});
/store/modules/order.js
const state = {
sharedVuex: null
};
/*Access standard getters with mapState.
Define custom getters here and access with mapGetters.*/
const getters = {
};
const actions = {
};
/* Curry function for mutations*/
const set = key => (state, value) => {
state[key] = value;
};
const mutations = {
/* simple setters */
setSharedVuex: set('sharedVuex')
};
export default {
namespaced: true,
state,
getters,
actions,
mutations
}