How to make a dynamic import in Nuxt?

by

Since the error was thrown during the import statement, I’d recommended using dynamic imports as explained in my other answer here.

async mounted() {
  if (process.client) {
    const Ace = await import('ace-builds/src-noconflict/ace')
    Ace.edit...
  }
},

From the official documentation: https://nuxtjs.org/docs/2.x/internals-glossary/context

EDIT: I’m not sure about Ace and it’s maybe a drastic change but you may also give a look to vue-monaco which is elbow-to-elbow popularity wise (vanilla Monaco editor).

EDIT2: mounted actually only runs on the client so you could strip the process.client conditional. Meanwhile, I do let it here in case you want to run some logic in other hooks like created (which are run on both server + client). More info here.

EDIT3: not directly related to the question, but some packages expose a component which is only available on the client-side (no SSR support), in those cases you could import the component only on the client side and easily prevent any other errors.

More Related Contents:

  1. how to make a maximum 1MB upload image?
  2. Vuex – Do not mutate vuex store state outside mutation handlers
  3. this.$auth.loggedIn returning false
  4. What’s the real difference between target: ‘static’ and target: ‘server’ in Nuxt 2.14 universal mode?
  5. Nuxt.js vuex store not persisted
  6. How to have list + details pages based on API fetched content
  7. Vue: wait to render until all components are mounted
  8. How to setup SASS/SCSS/sass-loader in Nuxt
  9. How to use microfrontends with Vue/Nuxt?
  10. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  11. How to fix navigator / window / document is undefined in Nuxt
  12. How to implement debounce in Vue2?
  13. How to pass a value from Vue data to href?
  14. How to format Vuetify data table date column?
  15. Vue: shared data between different pages
  16. Which command do I use to generate the build of a Vue app?
  17. vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard
  18. Running an Express server middleware alongside Nuxt
  19. Mocking methods on a Vue instance during TDD
  20. Delete a Vue child component
  21. Is it possible to emit from mounted in Vuejs?
  22. Why is ‘type: module’ in package.json file?
  23. Passing event and argument to v-on in Vue.js
  24. How to efficiently load google fonts in Nuxt
  25. Vue 3 Vite – dynamic image src
  26. How to access Vuex module getters and mutations?
  27. How can I share data between non parent-child components in Vue
  28. Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function
  29. How to access remote data and write it into a file during Nuxt build?
  30. Passing props to Vue.js components instantiated by Vue-router

Leave a Comment