es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo mostrar una Historia en Storybook

28 May, 2023 Programación

Resumen

He intentado implementar Storybook en una aplicación Nuxt.js.
Logré ejecutar Storybook. Y escribí index.vue y index.stories.ts.
Pero Storybook no muestra ninguna historia.

enter image description here

Por lo tanto, quiero saber cómo mostrar una historia.

Muestra algo de código

index.vue

<template>
  <nuxt-link to="https://nuxtjs.org">
    NuxtJs
  </nuxt-link>
</template></p>

<p><script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'</p>

<p>@Component({})
export default class TestComponent extends Vue {}
</script>

index.stories.ts

import Test from './index.vue'</p>

<p>export default {
  component: Test,
  title: 'Components/Test'
}</p>

<p>export const Component = () => ({
  components: { Test },
  template: '<Test />'
})

También escribí ./storybook/config.js para la configuración.

import { configure } from '@storybook/vue';</p>

<p>const req = require.context('../components', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach(filename => {
    return req(filename)
  });
}</p>

<p>configure(loadStories, module);

Aquí está el repositorio real. Por favor, revisa.
https://github.com/jpskgc/nuxt-sample/tree/storybook-error

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Hay algunas cosas que deben ajustarse para poder mostrar una historia en Storybook para una aplicación Nuxt.js:

    1. Actualizar el archivo ./storybook/config.js para importar los componentes Vue y NuxtLink de Nuxt.js:
    import { configure } from '@storybook/vue';
import Vue from 'vue';
import { NuxtLink } from '@nuxtjs/composition-api';

Vue.component('NuxtLink', NuxtLink);

const req = require.context('../components', true, /.stories.ts$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

    Aquí, importamos la instancia de Vue y el componente NuxtLink de Nuxt.js, y registramos el componente NuxtLink globalmente como un componente de Vue. Esto es necesario para poder utilizar el componente NuxtLink dentro de Storybook.

    1. Actualizar el archivo index.stories.ts para importar la instancia de Vue y el componente NuxtLink de Nuxt.js, y utilizarlos en la historia:
    import Vue from 'vue';
import { NuxtLink } from '@nuxtjs/composition-api';
import Test from './index.vue';

Vue.component('NuxtLink', NuxtLink);

export default {
  component: Test,
  title: 'Components/Test',
};

export const Component = () => ({
  components: { Test },
  template: '<test><nuxt-link to="https://nuxtjs.org">NuxtJs</nuxt-link></test>',
});

    Aquí, importamos la instancia de Vue y el componente NuxtLink de Nuxt.js, y registramos el componente NuxtLink globalmente como un componente de Vue. Luego, utilizamos el componente NuxtLink dentro de la plantilla de la historia, junto con el componente Test.

    Con estos cambios, la historia debería mostrarse ahora en Storybook.

Comments are closed.