Vue-bootstrapper NPM

Vue bootstrapper

A teeny-weeny Vue plugin for smoother frontend app bootstrapping

Installation

npm install --save vue-bootstrapper

Usage

Import vue-bootstrapper in your JS entry point and install it via Vue.use()

import Vue from 'vue'
import VueBootstrapper from 'vue-bootstrapper'

Vue.use(VueBootstrapper)

You can also override default options when installing it

Vue.use(VueBootstrapper, {
  option: '...'
})

The plugin exposes a global $context object that can be accessed from any part of the application.

To populate the $context you just need to pass data-* attributes to the root instance mountpoint, such as

<div
  id="vue-root"
  data-some-string="To the Batmobile!"
>
  ...
</div>

This will result in

$vm.$context = {
  someString: 'To the Batmobile!'
}

You can seamlessly pass numbers or JSON data as well:

<div
  id="vue-root"
  data-some-number="42"
  data-some-object='{
    "firstApiUrl": "/api/v1/firstApi",
    "secondApiUrl": "/api/v1/secondApi",
    "thirdApiUrls": {
      "a": "/api/v1/thirdA",
      "b": "/api/v1/thirdB"
    }
  }'
>
  ...
</div>

That will result in

$vm.$context = {
  someNumber: 42,
  someObject: {
    firstApiUrl: '/api/v1/firstApi',
    secondApiUrl: '/api/v1/secondApi',
    thirdApiUrls: {
      a: '/api/v1/thirdA',
      b: '/api/v1/thirdB'
    }
  }
}