provide/inject

by Rahul Kadyan

HTML

<!-- require bootstrap -->
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>

<!-- require vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- require bootstrap-for-vue -->
<script src="https://unpkg.com/bootstrap-for-vue/dist/bootstrap-for-vue.min.js"></script>


<!-- testing arena -->
<div id="app">
  
  <input-text v-model="foo" title="Test Input"></input-text>

  <input-button @click.native="submit">Submit</input-button>

</div>

CSS

/* require bootstrap */
@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

/* require bootrap-for-vue */
@import url('https://unpkg.com/[email protected]/dist/bootstrap-for-vue.min.css');

/* app styles */
#app {
  padding: 16px;
}

JavaScript

new Vue({
	el: '#app',
  
  data: () => ({ foo: 'foo' }),
  
  methods: {
  	submit () {
    	this.setFormErrors({
        foo: [`It should not be ${this.foo}.`],
      })
    }
  },
  
	mixins: [window['bootstrap-for-vue'].formHelper]
})