MyComponent.vue

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
  }, ...

Usage

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.

MyComponent UI

The component looks like this:

Styling

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>

Building with Vue Cli 3

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

Publishing to NPM

• 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

Developing the 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.

Using Vuex

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.

Reference

• /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
}