How to show template's source code ?

[beyzacaliskan]

I have an alert component and I want to show its template source code by using storysource.

`import alert from './Alert.vue'

storiesOf('Components', module) .addDecorator(withInfo) .add('Alert', () => ({

components: {alert},
template: `<alert></alert>`,
propsDescription: {
  alert: {
    'color': 'Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))'
  }
}

})`

As seen in the code, alert is imported from another Vue folder and I need to show the whole source code within that Vue folder .(not just <alert></alert>). Any solutions?

[pocka]

@beyzacaliskan There is no way to automatically show components' code. You can write a template in code block manually.

storiesOf('foo', module)
  .add('bar', () => ({
    components: { alert },
    template: '<alert />',
    // You can write markdown in summary
    summary: `
      code of \`<alert/>\`'s template.

      ${'```'}
      <div />
      ${'```'}
    `,
    // To hide STORY SOURCE section
    source: false
  }))

// or using raw-loader ...? idk it works
import alert from 'path/to/component'
import alertSouceCode from 'raw-loader!path/to/component'

storiesOf('foo', module)
  .add('bar', () => ({
    components: { alert },
    template: '<alert />',
    // ugly tho
    summary: `
      ${'```'}
      ${alertSourceCode}
      ${'```'}
    `,
    source: false
  }))

I know this isn't actually what you want. But the purpose of "STORY SOURCE" section is to show how to use the component (= source code of the stories), so I have no plan to implement this functionality.