How main.js file can be edited in Nuxt.js?

Question

I need to integrate ExtJS WebComponents with Nuxt.js. According to Sencha docs about integrating ExtJS with Vue.js I need to edit src/main.js file this way:

/*global Ext*/
import Vue from 'vue'
import App from './App.vue'
import '@sencha/ext-web-components/lib/ext-panel.component';

Ext.onReady(function() {
  new Vue({
    render: h => h(App)
  }).$mount('#app')
});

How can it be done in Nuxt.js?

Accouterment

does sencha support ssr in first place? – Leanneleanor

@Aldarund, I use SPA mode anyway, is it important in this case? – Accouterment

well, i dont think its possible now to do such thing as nuxt create and mount app under the hood. im not sure why sencha want it but maybe it will be enough if do await inside nuxt plugin – Leanneleanor

I am attempting the same exact thing - Ext JS Web Components in a Nuxt.js app. In the generated directory '.nuxt' there is a server.js file generated that executes the render function. I tried to directly override by editing the npm module @nuxt/vue-app/template/server.js and wrapped the render function in Ext.onReady and imported a panel ext-web-component and this seems to work. I am now searching to find out the correct way to override the server.js nuxt generated code. – Coley

Answer 1

You can easily do that with a plugin. I had the same problem with another package (about printing) and this is how I solved it:

1.In folder plugins, I created a file named printHtml.js containing:

import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';

Vue.use(VueHtmlToPaper);

2.Then in nuxt.config.js file i simply added:

  plugins: [
    '~plugins/printHtml.js'
  ],

And that's all. :) I was able to use the package functions in all components. You can do the same with ExtJS.

Vortical

According to the doc (nuxtjs.org/docs/2.x/directory-structure/plugins#vue-plugins) the answer is correct. – Toughen

How to "chain" the plugin setup though - if some plugin required other plugins to be initialized?.. Eg I am making a plugin, but I need to access internationalization plugin variable $t, which in turn is assigned through Vue.prototype.$t=... in another plugin. – Interweave

Answer 2

With vue(3.4.31) & nuxt(3.12.3) you can do the following:

Simply create a file in plugins folder named anything like main.ts, hello.ts etc

// import css/ts/json etc any file like you normally do

export default defineNuxtPlugin((nuxtApp) => {
    // here you can register simply
    nuxtApp.vueApp.use(______);
});

you don't need to touch nuxt config file, since it automatically pickup files in plugins folder, but remember to not nest it... add the file directly in root of plugins/ folder

Dilatometer