Import multiple component with one line (VueJs)

Question

I have two projects. One is for creating, writing components and another project will be for rendering them.

So far I have created npm link on componentsProject and liked them in renderingProject

componentsProject It has two simple components (Clock.vue and TextInput.vue)

Example of TextInput.vue

<template>
  <div>
    <textarea v-model="text"></textarea>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';

    export default Vue.extend({
        name: 'textInput',
        data() {
            return {
                text: '',
            };
        },
    });
</script>

and components folder also contains index.js so I would be able to export them and import them in renderingProject

import Clock from './Clock.vue'
import TextInput from './TextInput.vue'
export {
    Clock,
    TextInput
};

My renderingProject has following component, which is trying to import all components from componentsProject in one statment

<template>
  <div class="home">
    <Clock></Clock>
    <TextInput></TextInput>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Components } from 'componentsProject/src/components/index.js';


export default Vue.extend({
  name: 'home',
  components: {
      Components,
  },
});
</script>

Currently I'm getting following error.

"export 'Components' was not found in 'siriusComponents/src/components/index.js'

ERROR in renderProject/src/views/Home.vue
9:28 Could not find a declaration file for module 'componentsProject/src/components/index.js'. 'renderProject/node_modules/componentProject/src/components/index.js' implicitly has an 'any' type.
  Try `npm install @types/componetProject` if it exists or add a new declaration (.d.ts) file containing `declare module 'componentProject/src/components/index.js';`
     7 | <script lang="ts">
     8 | import Vue from 'vue';
  >  9 | import { Components } from 'componentProject/src/components/index.js';
       |                            ^
    10 | 
    11 | 
    12 | export default Vue.extend({

Can you please help me out, how to fix my error, so I could import x number of components with one import statement. If you need any additional informations, please let me know and I will provide. Thank you!

Current error is not related to component's import, but to types definitions not provided for imported module componentProject. Module type definitions should be declared or set to any (not recommended). More on modules. — aBiscuit
– aBiscuit, Commented Nov 14, 2018 at 15:41
Can you give me an example how should my syntax look like (declared version) so it would work — Valor_
– Valor_, Commented Nov 15, 2018 at 7:25

Valor_ · Accepted Answer · 2019-01-29 18:00:20Z

2

So I found a solution for my problem. I changed index.js => index.ts Code still looks the same

import Clock from './Clock.vue';
import TextInput from './TextInput.vue';

export default {
    Clock,
    TextInput,
};

I had to change setting in my PhpStorm (Settings => Languages & Frameworks => TypeScript. Check Recompile on change checkbox)

And I made small code change on renderProject, so my import statement looks like this now

<script lang="ts">
import Vue from 'vue';
import Components from 'componentsProject/src/components/index';

export default Vue.extend({
  name: 'home',
  components: Components,    
});
</script>

And its working! ;)

edited Jan 29, 2019 at 18:00

answered Nov 15, 2018 at 8:13

Valor_

3,6119 gold badges65 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import multiple component with one line (VueJs)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related