Creating a block

The plugin is called the vue-block-system because the site is build up from blocks. So creating them is what you probably do all the time. To create a block follow the next steps

Generating the block

To generate a block run the following command in the root of your project:

sg block-component [NameOfYourBlock]

Typing block data

When a block is generated you will get a [NameOfYourBlock]Data.jsfile in the block folder, you should use this file to predefine all the data that your block will receive from the json file. The typing is done using VueTypes which is included in the vue-skeleton. Typing your data is a way to avoid data mismatches.

import VueTypes from 'vue-types';

export default {
  foo: VueTypes.string.isRequired,
  bar: VueTypes.shape({
    foo: VueTypes.string.isRequired,
    bar: VueTypes.string.isRequired,
  }).isRequired,
};

Enabling the block

After the block is created you have to expose it to the vue-block-system plugin you can do this by modifying the src/block/index.js file. You can do that like this:

import DummyBlock from './DummyBlock';

export default {
  DummyBlock,
}

Keep in mind that if you have a lot of blocks (for example over 50) the production build might fail because Node is out of memory. This is because the object would be come to big to write. To fix this you can use Vue Async component definition. This will create chunks for all of your blocks (1.js, 2.js, 50.js, etc)

export default {
  DummyBlock: () => import('./DummyBlock'),
};

You can change the build/webpack.prod.conf.js file to limit those chunks so webpack will group them. Simply modify the file to contain the new plugin which is part of webpack.

const LimitChunkCountPlugin = require('webpack').optimize.LimitChunkCountPlugin;

...
new LimitChunkCountPlugin({
  maxChunks: 5,
}),
...

Adding the block to a page

To view your block you need to add it to your page. You should add a block like this:

{
  "statusCode": 200,
  "data": {
    "title": "Home",
    "data": {},
    "blocks": [
      {
        "id": "DummyComponent",
        "data": {
          "foo": "bar"
        }
      }
    ]
  }
}

Using block data

Inside of your block you can access it through the data prop that is passed on through the block

...
<p>{{data.foo}}</p>
...