Storybook file does not import corresponding .vue

Question

Summery

I want to import vue file(component/index.vue) in storybook file(component/index.stories.ts).
But it is compile error and cannot be imported.

component/index.stories.ts

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

export default {
  title: 'Test'
}

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

Here is the directory.

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

I want to know how to resolve this compile error and success to run Storybook.

Answer 1

After creating index.d.ts, I can import .vue file and success to dispay 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 />'
})