Vite build and Global Vue 3 Components via Typescript

Question

This question could be answered by fixing the typescript error or how best to handle global Vue 3 component registrations with Typescript. In a nutshell, if I run npm run dev (vite) the dev server runs fine and there are no issues. When trying to produce a build via npm run build (vue-tsc --noEmit && vite build) the following error occurs:

src/main.ts:15:17 - error TS1131: Property or signature expected.

15 app.component(Components[key].name, Components[key]);

A little background, all components I had were created based on the documentation and use of defineComponent. An example is below. At some point, several components needed to be registered globally because they are used throughout the entire application.

<script lang="ts">
//sbutton.vue
import { defineComponent } from "vue";

export default defineComponent({
  name: "s-button",
  props: {
    disabled: {
      default: false,
      type: Boolean
    },
    loading: {
      default: false,
      type: Boolean
    }
  },
  computed:{
    disableBtn(): Boolean {
      return this.loading || this.disabled;
    }
  }
});
</script>

I took the global components and consolidated them to an object that I could run through and register globally.

// components/index.ts

import BlogSubscribe from './BlogSubscribe.vue';
import SButton from './SButton.vue';

const components = {
    BlogSubscribe,
    SButton
};

export default components;

And finally registered them globally in main.ts:

import Components from './components';

const app = createApp(App).use(router);

for (const key in Components) {
  app.component(Components[key].name, Components[key]);  // <- error here
}

To recap, usuing vue3, vite, typescript what is the best process for registering a group of global components in order to produce a build version of the application.

lucuma · Accepted Answer · 2021-03-29 19:50:04Z

0

I solved it this way but not sure it is the best nor recommended way to handle global vue component registrations with vite/vue3.

const components:{[index:string]: Component<any, any, any, ComputedOptions, MethodOptions>} = {
   [BlogSubscribe.name]: BlogSubscribe,
    [SButton.name]: SButton
};

export default components;

and in main.ts:

for (const key in Components) {
  app.component(key, Components[key]);
}

answered Mar 29, 2021 at 19:50

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

Vite build and Global Vue 3 Components via Typescript

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