Setup

The vue-block-system works with the vue-skeleton by hjeti, first start with a clean checkout of the vue skeleton and then follow the steps!

Installing the plugin

To install the plugin run the following command:

yarn add vue-block-system

Setup the seng-generator

Nobody likes typing the same code over and over again, to automatically generate code you can use the seng-generator. This generator uses templates to output code, the block system includes custom templates that can be used for generating content-pages, blocks and buttons. To add these templates to the seng-generator you run the following command in the root of your project:

sg init

This wil let you modify the default configuration of the seng-generator, in our case we want to modify the template path. When it comes up you should modify it to be the following:

./template,./node_modules/vue-block-system/template

Create the api

The block system works with json files for generating the pages. In the staticRoot folder create a folder and name it api inside this folder you should create another folder called page.

api/init.json

The system needs an init call that contains the startup information for the site by default this should be the following:

{
  "statusCode": 200,
  "data": {
    "routes": {
      "landing": "/home",
      "notFound": "/page-not-found"
    }
}

page/home.json

The default route for when the user hits the site on the / is defined in the landing route. This page is the default page of your website. The page structure is the following:

{
  "statusCode": 200,
  "data": {
    "title": "Home",
    "data": {},
    "blocks": []
  }
}

page/page-not-found.json

When the user tries to load a page that does not exist it loads a not found page. This is just like any other page that contains blocks

{
  "statusCode": 200,
  "data": {
    "title": "Page not found",
    "data": {},
    "blocks": []
  }
}

Generate a content page

The block system works with a so called 'ContentPage` a content page is just a wildcard page that contains the blocks for the current route. This means you will most likely not create any other pages than this one. To generate the content page you can use the seng-generator. Run the following command in the root of your project:

sg block-content-page ContentPage

When the content page is generated you have to define it in the src/data/enum/PageNames.js file. It wil most likely look like this:

export default {
  CONTENT_PAGE: 'content-page',
};

Create a wildcard route

Since the block system works with a wildcard page we want all the routes to point to the ContentPage. First you have to update the src/data/enum/PagePaths.js file to contain our new wildcard route. It wil most likely look like this:

export default {
  CONTENT_PAGE: '*',
};

After defining the PagePath you have to assign it to the vue router. This can be done in the src/router/routes.js file. It wil most likely look like this:

import { COMPONENT_ID } from 'vue-transition-component';
import ContentPage from 'page/ContentPage';
import PagePaths from 'data/enum/PagePaths';
import PageNames from 'data/enum/PageNames';

export default [
  {
    path: PagePaths.CONTENT_PAGE,
    component: ContentPage,
    name: PageNames.CONTENT_PAGE,
    props: {
      [COMPONENT_ID]: PageNames.CONTENT_PAGE,
    },
  },
];

Create a block folder

All blocks for the site are generated within a folder called block. Create this folder at the following location: src/block. Inside of this new folder you should create a file called index.js this file exposes the blocks to the block system. The default file wil look like this:

export default {};

Enable the plugin

To enable the plugin you simply modify the src/control/startUp.js to include the following default configuration:

Vue.use(BlockSystem, {
  store: getStore(),
  block,
  config: {
    api: {
      pageCall: 'static/api/page/{page}.json',
      initCall: 'static/api/init.json',
    },
  },
});

Note: For more custom configuration of the plugin see the configuration section of the wiki!

Wait for the plugin to be ready

To make sure the block system is ready there is a promise available that will be resolved when the init call is completed. You can use the promise Vue.blockSystemReady to check if the system is ready. Simply add it to the src/control/startUp.js in the Promise.all[] check.

...

// Add async methods to the Promise.all array
return Promise.all([
  Vue.blockSystemReady,
  configManager.getVariable(VariableNames.LOCALE_ENABLED) ? waitForLocale(store) : Promise.resolve(),
]);

...