danielschmitz

<template>
  <div>
    <form-box title="Hello Form Box" message="A help message" v-on:save="onSave" @clear="onClear">
        <b-field label="Name">
            <b-input v-model="name"></b-input>
        </b-field>
        <b-field label="Email">
            <b-input v-model="email"></b-input>
        </b-field>
    </form-box>

danielschmitz

<b-message :title="title" :closable="false">
 <b-tag type="is-warning" v-show="message">{{message}}</b-tag>
 <slot></slot>
 <hr/>
 <button class="button is-primary is-pulled-right" @click="$emit('save')" >Save</button>
 <button class="button is-secondary " @click="onClearClick" >Clear</button>
</b-message>

danielschmitz

<template>
  <div>
    Hello World
    <form-box title="Hello Form Box" message="A help message" v-on:save="onSave" @clear="onClear"></form-box>
  </div>
</template>

<script>
import FormBox from './FormBox.vue'

danielschmitz

<template>
  <div>
      <b-message :title="title" :closable="false">
        <b-tag type="is-warning" v-show="message">{{message}}</b-tag>

        <hr/>
        <button class="button is-primary is-pulled-right" @click="$emit('save')" >Save</button>
        <button class="button is-secondary " @click="onClearClick" >Clear</button>
      </b-message>
  </div>

danielschmitz

<template>
  <div>
      <b-message :title="title" :closable="false">
        <b-tag type="is-warning" v-show="message">{{message}}</b-tag>
      </b-message>
  </div>
</template>
<script>
export default {
  name: 'FormBox',

danielschmitz

<template>
  <div>
      <b-message :title="title">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet,
        elit sapien laoreet elit
      </b-message>
  </div>
</template>
<script>
export default {

danielschmitz

<template>
  <div>
    <b-message title="Default">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet,
      elit sapien laoreet elit
    </b-message>
  </div>
</template>
<script>
export default {

danielschmitz

<template>
  <div>
    Hello World
    <form-box></form-box>
  </div>
</template>

<script>
import FormBox from './FormBox.vue'

danielschmitz

<template>
  <div>
    FormBox
  </div>
</template>
<script>
export default {
  name: 'FormBox',
  data () {
    return {

danielschmitz

<template>
  <section>
    Hello World
  </section>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {