Share data across Vue components.

Installation

1. Install module:

   1# with yarn
   2yarn add @fahrirusliyadi/vuejs-page-data
   3
   4# or with npm
   5npm install @fahrirusliyadi/vuejs-page-data

2. [Optional] install proxy-polyfill to support old browsers:

   1# with yarn
   2yarn add proxy-polyfill
   3
   4# or with npm
   5npm install proxy-polyfill

3. Tell Vue to use the plugin:

   1import Vue from 'vue';
   2import PageDataPlugin from '@fahrirusliyadi/vuejs-page-data';
   3
   4const options = {
   5  // Plugin options.
   6};
   7
   8Vue.use(PageDataPlugin, options);

Usage

Define page data on any component.

1export default {
2  pageData() {
3    return {
4      // Your data.
5    };
6  },
7};

Use the data from any component using $pageData property.

1this.$pageData.title;
2
3// Nested data.
4// Uses Lodash' path (https://lodash.com/docs/4.17.15#get).
5this.$pageData['a[0].b.c'];

Updating data.

1this.$pageData.title = 'New title';
2
3// Nested data.
4// Uses Lodash' path (https://lodash.com/docs/4.17.15#set).
5this.$pageData['a[0].b.c'] = 1;

Example

1<template>
2  <h1>
3    {{ $pageData.title }}
4  </h1>
5</template>
6
7<script>
8  export default {
9    pageData() {
10      return {
11        title: 'Hello World!',
12      };
13    },
14  };
15</script>

Options

• [Optional] {Object} initialData: Initial page data.