@fahrirusliyadi/vuejs-page-data v0.0.2

Share data across Vue components.

Installation

1. Install module:

   # with yarn
   yarn add @fahrirusliyadi/vuejs-page-data
   
   # or with npm
   npm install @fahrirusliyadi/vuejs-page-data

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

   # with yarn
   yarn add proxy-polyfill
   
   # or with npm
   npm install proxy-polyfill

3. Tell Vue to use the plugin:

   import Vue from 'vue';
   import PageDataPlugin from '@fahrirusliyadi/vuejs-page-data';
   
   const options = {
     // Plugin options.
   };
   
   Vue.use(PageDataPlugin, options);

Usage

Define page data on any component.

export default {
  pageData() {
    return {
      // Your data.
    };
  },
};

Use the data from any component using $pageData property.

this.$pageData.title;

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

Updating data.

this.$pageData.title = 'New title';

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

Example

<template>
  <h1>
    {{ $pageData.title }}
  </h1>
</template>

<script>
  export default {
    pageData() {
      return {
        title: 'Hello World!',
      };
    },
  };
</script>

Options

• Optional {Object} initialData: Initial page data.