lmiller1990

import Vue from ‘vue’
import { storiesOf } from ‘@storybook/vue’
import Profile from ‘@/views/profile/Profile’

storiesOf(‘Profile’, module)
  .add(‘with a profile image’, () => ({
     components: { Profile },
     template: ‘<Profile />’
  }))

lmiller1990

<template>
  <div>
    <img :src="profileImage">
  </div>
</template>

<script>
  export default {
    name: 'Profile',

lmiller1990

storiesOf('Profile', module)
  .add('with a profile image', () => ({
    components: { Profile },
    data () {
      return {
        image: 'https://vuejs.org/images/logo.png'
      }
    },
    template: '<profile :profile-image="image" />'
  }))

lmiller1990

<script>
...
data () {
  return {
    result: {},
    loaded: false
  }
},

mounted () {

lmiller1990

<template>
  <div>
    <Profile 
      v-if=”loaded”
      :profile-image=”result.profile.profile_image”
    />
  </div>
</template>

lmiller1990

<template>
 <div>
   <Profile 
     v-if=”loaded”
     :profile-image=”result.profile.profile_image”
     :profile-data=”result.profile”
   />
  </div>
</template>

lmiller1990

<template>
  <div>
    <img :src="profileImage">
    <div>
      Name: {{ profileData.name }}
    </div>
    <div>
      Location: {{ profileData.location }}
    </div>
    <div>

lmiller1990

storiesOf('Profile', module)
  .add('with a profile image', () => ({
    components: { Profile },
    data () {
      return {
        image: 'https://vuejs.org/images/logo.png',
        profileData: {
          name: 'Lachlan',
          location: 'Tokyo',
          about: 'Software dev, steem and AI/ML'

lmiller1990

<template>
 <div>
   <Profile 
     v-if=”loaded”
     :profile-image=”result.profile.profile_image”
     :profile-data=”result.profile”
   />
  </div>
</template>

lmiller1990

import { configure } from ‘@storybook/vue’
import Vue from ‘vue’
function loadStories () {
  require(‘../src/stories’)
}
configure(loadStories, module);