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?

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.