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

Development

Launch webpack dev server

npm run dev

Launch tests with Jest

Launch the test command, which will perform linting beforehand

npm run test

Build

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

npm run build

Publishing

TODO

License

BSD