The Storybook file is unable to find and import the corresponding .vue file

Issue with Importing Vue File in Storybook

I am facing an issue while trying to import a vue file (component/index.vue) into my storybook file (component/index.stories.ts). The compilation is failing and the import cannot be completed.

component/index.stories.ts

import Test from '~/components/test/index.vue' # <- compile error.

export default {
  title: 'Test'
}

export const TestWebsite = () => '<Test />'

Given below is the directory structure:

project
  ├ pages
  │  └ index.vue
  ├ components
  │  ├ test
  │  │  ├ index.vue
  .  .  └ index.stories.ts
  .  .

I would appreciate any guidance on resolving this compile error and successfully running Storybook.

vue.jsnuxt.jsstorybook

Answer №1

Once the index.d.ts file was created, I successfully imported the .vue file and managed to display it on Storybook.

index.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  const _default: Vue
  export default _default
}

index.stories.ts

import Test from './index.vue'

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to display nested JSON data from API in Vue.js

Having trouble accessing nested properties from API JSON data. The Vue component I'm working on: var profileComponent = { data : function() { return { isError : false, loading : true, users : null, ...

javascriptjsonvue.js

What is the best way to generate a responsive XML element in Vue 3?

In the realm of Vue 2, creating a reactive XML object was a breeze. With it, I could easily render a tree-like HTML view that depended on changes in the XML object to reflect the current state accurately. However, in the world of Vue 3, this functionality ...

xmlvue.jsvuejs2vuejs3reactive

Vue 3 Option api: Issue with v-model input not propagating from child component to parent element

I am currently working on a new project using Nuxt 3, and I have encountered an issue with a contact form where the input values from a child component are not being received by the parent element. Let's dive into the code breakdown: Parent Component ...

javascriptvue.jsvuejs3v-model

Ensure that the modal remains open in the event of a triggered keydown action, preventing it from automatically closing

I am currently toggling the visibility of some modals by adjusting their CSS properties. I would like them to remain displayed until there is no user interaction for a period of 3 seconds. Is there a way to achieve this using JavaScript? Preferably with Vu ...

javascriptcssvue.js

It requires two clicks on the button for the Vue and Pinia store to update

I've been experimenting with Vue and trying to understand it better. When I click the button in LoginForm.vue for the first time, both token and user_data are null. It's only on the second click that they finally update. How can I ensure these va ...

vue.jsvue-componentpinia

Could you please install an older version of Vue.js devtools, or consider downloading an earlier release

Just noticed the latest update for vue devtools, but it seems to have some issues with displaying my vuex store data. The data gets updated after mutations but doesn't show up in the tool anymore. Has anyone figured out how to revert back to the prev ...

vue.jsvue-devtools

showing the values stored in local storage

My goal is to show only the values stored in local storage, excluding the key value that displays all data after submitting the login form. welcome <span id="demo"></span>; <script> document.getElementById('demo').innerHTML = ...

javascriptvue.jslocal-storage

Is it not possible to implement a "literal" component in SFC?

I'm attempting to create a straightforward "literal" component using MyComponent inside a single file component in Vue 3: <template> <MyComponent>aha</MyComponent> </template> <script> import { ref } from "vue"; const ...

vue.jsvuejs3

Transforming API Response into a structured format to showcase a well-organized list

When I make an API call for a list of properties, the data comes back unorganized. Here is how the data from the API looks when stored in vuex: posts:[ { id: 1; title: "Place", acf: { address: { state: "Arkansas", ...

javascriptjsonvue.jssortingvuejs2

How can I ensure that I am only retrieving the first object within a "for loop" in vuejs and returning its value without getting the rest?

Why am I only able to retrieve the value of the first object in my "for loop" and not all three values as intended? var app = new Vue({ el: '#app', data: { myObj: [ {name: 'Hello', age: 10}, {name: ...

javascripthtmlfor-loopvue.js

Creating a versatile tabbed interface with Vue.js for multiple uses

I am currently working on integrating a tabbed reusable component in vueJs, but I encountered an issue stating that a specific component is not defined. Below, you will find the code snippets for both components: //TabComponent <template> <di ...

vue.jsvue-component

What is the best way to determine the total of values from user-input fields that are created dynamically

Scenario- A scenario where a parent component is able to create and delete input fields (child components) within an app by clicking buttons. The value of each input field is captured using v-model. Issue- The problem arises when a new input field is crea ...

javascriptformsvue.js

Can we retrieve the body from an Axios post request catch block?

When sending a post request to the API using axios, I receive a response of type "xhr" with an error message in the console: axios.post('https://api.myapp.com:8000', formData).then(function (response) { }).catch(function (error) { console.lo ...

vue.jsvuejs2vue-component

Discovering the Secrets of Laravel 5: Harnessing the Power of Vue.js to Access Data Attribute Values

I'm a beginner in vue js. Within our app, we have implemented validation to check if a value already exists in the database. I would like to enhance this feature by making it dynamic. To achieve this, I have added a data attribute to my field which is ...

phplaravelvue.jslaravel-5

Utilizing Nuxt 3 server as a passthrough API along with FormData for concealing external endpoints

I'm currently grappling with understanding the Nuxt/server API and am struggling to figure out how to properly send a POST request with form-data (specifically files) to the Nuxt server in order to forward it to an external service: Within my pages.v ...

apivue.jsnuxt.js

Verifying user presence in Vue when making edits

Currently, I'm attempting to validate user existence in Vue using Vuetify inputs when trying to edit a User. The goal is to prevent an error if the username already exists, unless it is the old username of the user being edited without any changes mad ...

vue.jsvuetify.js

Obtain the textfield whenever the user desires

I have added an image upload file field in the form. If the user wants a multi-select field, I want to allow the user to choose the number of files they want to upload. Take a look at my text field below: <div class="form-group col-lg-10"> {! ...

javascriptjquerylaravelvue.js

What is the best way to retrieve Vuex state in a separate JavaScript/TypeScript file that is not a part of a Vue component

We strive to separate business logic from UI logic by setting up a Typescript service class that can interact with a Node Module API and update the Vuex state of our app. This approach allows us to keep Vue components free from direct involvement in this b ...

vue.jsvuejs2vuex

Simultaneous Push and Insert operations with Vue.js and PHP

I am looking to add a value into an Array and have it displayed instantly without the need to refresh the entire page. app.todoList.push(this.todo) This line accomplishes that task. Simultaneously, I also want to insert this value into a Database. The i ...

vue.jsaxios

What is the best way to monitor a document variable that is set after a component has been

Is there a way to access the variable document.googleAnalytics, added by Google Tag Manager, for A/B testing on a Vue.js page? I attempted to initialize the variable in both the mounted and created methods of the component, but it returns as undefined: ex ...

javascriptvue.jsgoogle-tag-manager