A teeny-weeny Vue plugin for smoother frontend app bootstrapping

npm install --save vue-bootstrapper

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"
    }
  }
}

npm run dev

Launch the test command, which will perform linting beforehand

npm run test

Launch the build command, which will output a minified bundle in the dist folder

npm run build

TODO

BSD