[Vuejs]-Issues loading Vue defineComponent()s in Nuxt | Could not load vue.esm-bundler\server-renderer

by

0👍

The issue seems to be that if we set an alias for Vue in the config for my components we are globally replacing the the Vue alias used by the server side renderer, hence the missing server-renderer message. I just want to replace it for the client side (specifically for my specific components but client/server delineation is fine by me as well for now).

Thanks to this Github issue thread (@shtse8), this has been solved by the following addition to the nuxt.config.ts

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    hooks: {
        'vite:extendConfig': (config, { isClient, isServer }) => {
          if (isClient)
            config.resolve.alias.vue = 'vue/dist/vue.esm-bundler.js'
        },
      },
})

This will generally result in a TS type error on the IDE linting end but seems to function without issue.
Property 'vue' does not exist on type 'AliasOptions'. Property 'vue' does not exist on type 'readonly Alias[]'

Leave a comment