How do I move shared components to a separate folder?-CodePudding

I have the following project structure.

folder/
├─ projectA/
│  ├─ src/
│  │  ├─ views/
│  │  │  ├─ HomeView.vue
│  ├─ package.json
├─ projectB/
├─ shared/
│  ├─ HelloWorld.vue

ProjectA and ProjectB are independent projects created with the help of a command :

-> vue create ...

shared - a folder that should contain only files.vue - components that can be used in both project A and project B.

The HomeView.vue (from projectA) component tries to use the HelloWorld.vue (from shared folder) component.

HomeView.vue

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '../../../shared/HelloWorld.vue' // @ is an alias to /src

export default defineComponent({
   name: 'HomeView',
   components: {
       HelloWorld
   }
})

HelloWorld.vue

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

If HelloWorld.vue the vue component in projectA in the "components" folder everything will work (the import path will change slightly). But when I try to output this component to the shared folder, I get the following error:

ERROR in ../shared/HelloWorld.vue:37:33
TS2307: Cannot find module 'vue' or its corresponding type declarations.
    35 |
    36 | <script lang="ts">
  > 37 | import { defineComponent } from 'vue'
       |                                 ^^^^^
    38 |
    39 | export default defineComponent({
    40 |   name: 'HelloWorld',

How do I fix the error and make the components that are outside the project work correctly?

From the documentation:

“Why can’t people use my .vue file directly? Isn’t that the simplest way to share components?” It’s true, you can share .vue files directly, and anyone using a Vue build containing the Vue compiler can consume it immediately.

CodePudding user response：

The error message is quite self-explanatory:

  TS2307: Cannot find module 'vue' or its corresponding type declarations.

  > 37 | import { defineComponent } from 'vue'

In the shared folder, there is no vue dependency so HelloWorld can't import it. If you check any vue component library published on npm you will see they have a package.json file in which you can find a vue dependency.

I would suggest you simply copy the component inside your project OR you take the longer, but much more rewarding path of creating your very own npm package with vue components. You can start here. (Disclaimer: I didn't follow the steps in the article but it looks alright at first glance and it should give you a general idea of the process)