Vue-services-container NPM

Vue Service Container Overview

Container Around Vue Instance
Hook into Multiple Callbacks before and after vue instance is launched
- registering(callback) hook
- booting(callback) hook
- afterLaunching(callback) hook
Add as many callbacks for a given hook as needed
Create hooks, and import them as needed to support extremely optimal code splitting

1. Install

  npm i vue-services-container

2. Import

   import { CreateVueServiceContainer } from 'vue-services-container'

3. Create Container as a property on the window

window.Container = CreateVueServiceContainer(config)

config parameter
- NOT container configuration object
- config can be an empty object
- In many scenarios, you can json_encode back-end data and pass it in as the config to the container
- all container callbacks have access to this config object

4. Inject Global Vue Instance Into Container (Recommended, but not required)

// recommended to pass your own Vue Class into the container but not required
import Vue from 'vue'

window.Container.setVue(Vue)

Recommended to avoid "complex" conflicts
Containers has its own Vue Global API if you opt out of this option
registering, booting, and afterLaunching callbacks
- Accept a Global Vue Class
- If you don't override the Container default Vue Class
  - And You update your application Vue Prototype
  - The Container Vue Prototype Will not Inherit those changes

5.Register Global Vue Config

https://vuejs.org/v2/api/#Global-Config
To use vue devtools use the snippet

window.Container.registering(({ Vue, config }) => {
    Vue.config.silent = false
    Vue.config.devtools = true

    // add config object we passed in to our vue prototype so all vue instances
    // have access to whatever data we wanted to pass in from either a random json object
    // or json encode data from the back end
    Vue.prototype['config' ] = config
})

6. Register Vuex store and add parameters to callbacks

use the following snippet to inject vuex into your instance

import Vuex from 'vuex'
import store from './store'

window.Container.registering(({ Vue, root, container }) => {
    // 1. Use Vuex as a Vue plugin
    Vue.use(Vuex)

    // 2. add the vuex store the root vue instance
    root.addVuex(new Vuex.Store(store))
    
    // 3. add the store as parameter for all proceeding callbacks
    container.addRegisterParameters({ store })
    container.addBootParameters({ store })
    container.addAfterLaunchParameters({ store })
})

7. Register Vue plugins

import VueRouter from 'vue-router'

window.Container.registering(({ Vue }) => {
    Vue.use(VueRouter)
})

8. Configure root instance

window.Container.registering(({ root }) => {
   root.set({
      el: '#app',
      name: 'about-us-page',
   })
})

9. Register Global Container Event Bus

window.Container.registering(({ Vue, container }) => {

    // 1. create global Event bus on container
    container.Event = new Vue()
    container.Event.fire = container.Event.$emit
    container.Event.listen = container.Event.$on
    container.Event.forget = Container.Event.$off
    container.Event.listenOnce = container.Event.$once
    
    // 2. add event bus to vue prototype this allows us to trigger reactive events outside the scope of Vue
    Vue.prototype['Event'] = container.Event

})

10. Register Global Vue Filters

window.Container.registering(({ Vue }) => {
    Vue.filter('capitalize', str => str.charAt(0).toUpperCase() + str.slice(1)) 
})

11. Register Global Vue Directives

window.Container.registering(({ Vue }) => {
    Vue.directive('href', (element, bind, vnode) => {
        element.onclick = () => window.location = bind.value
    })
})

12. Register Global Vue Components

import ExampleGlobalComponent from '@Global/example-global-component'
 
window.Container.registering(({ Vue }) => {
    Vue.component('example-global-component', ExampleGlobalComponent)
})

13. Interact With Vuex Store Before We Launch Our Instance

In step 6 we added store as an additional callback parameter
Our vue instance does NOT need to be mounted to interact with vuex
Interact with vuex directly
Then, when we launch ~ the instance will get the stores current state

window.Container.registering(({ store, config }) => {
    store.commit('theme/colors', config.theme.colors)
})

Default registering callback parameters
- Vue
  - Interact with global Vue API
  - https://vuejs.org/v2/api/#Global-API
  - Or Global Vue Api Object you set

window.Container.registering({ Vue, container, root, config,

I recommend adding all Vue stuff you'll re-use globally in registering callbacks

Since our Container is globally registered to the window
- These register callbacks can all be there own file
- Then require/import each file that contains a register callback
- This allows for code splitting, and if we dont need something
  - Dont require or import that callback

Final notes on the registering callback

Default registering callback parameters
- config
  - What we passed in to the CreateVueContainer function at the very beginning
- Vue
  - Global Vue Object
- root
  - What will be the root vue instance when we run Container.launch()
- container
  - Global Vue Service Container (Same thing as window.Container)
- any addedRegisterParameters
  - add additional register callback params using
```
  Container.addRegisterParameters({ addedParameter: 'example' })
```

14. Add Booting Callbacks

// about us page
import '@Bootstrap/container'
import '@Bootstrap/registering-container-callbacks
import AboutUsSummary from './component/about-us-summary'

window.Container.booting(({ Vue, root }) => {
    root.set({ name: 'about-us-page' })
    Vue.component('about-us-summary', AboutUsSummary)
})

Not by code splitting, we can actually register pretty much all components globally
- When done correctly
  - No page, with the exception of poorly designed or very rare cases
  - We won't need to keep our component imports local because we'll only be loading the components we need for this given about page ~ not the entire site

15. Use Code Splitting (Highly Recommended)

Personally, I like booting callbacks to be specific to a code split
- I recommend registering callbacks to be ran on every page
- I recommend booting callbacks to be ran on specific pages
- registering callbacks execute before booting callbacks
- Depending on the page the user lands on, we load a different script
  - import the container
  - import all of the registering callbacks
    - registering callbacks are what will be shared on every page
- Add feature/page components, filters, plugins, etc... within the pages booting callback
- Example of Three different pages when using code splitting

Split A. Contact Us Page

// contact us page
import '@Bootstrap/container'
import '@Bootstrap/registering-container-callbacks
import ContactUsForm from './component/contact-us-form'

window.Container.booting(({ Vue, root }) => {
   root.set({ name: 'contact-us-page' })
   Vue.component('contact-us-form', ContactUsForm)
})

Split B. About us page

// about us page
import '@Bootstrap/container'
import '@Bootstrap/registering-container-callbacks'
import AboutUsSummary from './component/about-us-summary'

window.Container.booting(({ Vue, root }) => {
    root.set({ name: 'about-us-page' })
    Vue.component('about-us-summary', AboutUsSummary)
})

Split C. Blog Page

// Home page
import '@Bootstrap/container'
import '@Bootstrap/registering-container-callbacks
import BlogContent from './component/blog-content'
import BlogComment from './component/blog-comment'
import BlogSidebar from './component/blog-sidebar'
import BlogAuthorSection from './component/blog-author-section'

window.Container.booting(({ Vue, root }) => {
    root.set({ name: 'blog-page' })
    Vue.component('blog-content', BlogContent)
    Vue.component('blog-comment', BlogComment)
    Vue.component('blog-sidebar', BlogSidebar)
    Vue.component('blog-author-section', BlogAuthorSection)
})

16. Register afterLaunching callbacks

afterLaunching callbacks have access to the app (AKA the vue instance)

window.Container.afterLaunching(({ container, app }) => {
    // register a global logout method on your container instance
    // using a ref registered on your app instance
    container.logout() = () => app.$refs['logoutForm'].submit()
})