Using Vform with Nuxt JS

[Aslam Doctor]

Is there any way I can use Vform with Nuxt JS as a plugin?
https://nuxtjs.org/guide/plugins/

So that I don't have to add below code on all the pages?

import { Form, HasError, AlertError } from 'vform'
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

I tried to create plugin by adding a vform.js file inside nuxt plugins folder

import Vue from 'vue'
import { Form, HasError, AlertError } from 'vform'

Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

But when on any nuxt page if I do new Form() , it says "Form" is not defined.

[Eusebiu Cretu]

Try this: #30 (comment)

[Aslam Doctor]

Thank You. That helped.

[Ashik Ahmed]

import Vue from 'vue';
import { Form, HasError, AlertError, AlertSuccess } from 'vform';
Vue.component(HasError.name, HasError);
Vue.component(AlertSuccess.name, AlertSuccess);
Vue.component(AlertError.name, AlertError);

export default ({ app }, inject) => {
Form.prototype.submit = function submit(method, url, config = {}) {
this.startProcessing();

const data = method === 'get' ? { params: this.data() } : this.data();

return new Promise((resolve, reject) => {
  app.$axios
    .request({
      url: this.route(url),
      method,
      data,
      ...config
    })
    .then(response => {
      this.finishProcessing();
      resolve(response);
    })
    .catch(error => {
      this.busy = false;

      if (error.response) {
        this.errors.set(this.extractErrors(error.response));
      }

      reject(error);
    });
});

};

app.$vform = (...params) => new Form(...params);
inject('vform', (...params) => new Form(...params));
};

[Ashik Ahmed]

import Vue from 'vue';
import { Form, HasError, AlertError, AlertSuccess } from 'vform';
Vue.component(HasError.name, HasError);
Vue.component(AlertSuccess.name, AlertSuccess);
Vue.component(AlertError.name, AlertError);

export default ({ app }, inject) => {
Form.prototype.submit = function submit(method, url, config = {}) {
this.startProcessing();

const data = method === 'get' ? { params: this.data() } : this.data();

return new Promise((resolve, reject) => {
  app.$axios
    .request({
      url: this.route(url),
      method,
      data,
      ...config
    })
    .then(response => {
      this.finishProcessing();
      resolve(response);
    })
    .catch(error => {
      this.busy = false;

      if (error.response) {
        this.errors.set(this.extractErrors(error.response));
      }

      reject(error);
    });
});

};

app.$vform = (...params) => new Form(...params);
inject('vform', (...params) => new Form(...params));
};

[Ashik Ahmed]

import Vue from 'vue';
import { Form, HasError, AlertError, AlertSuccess } from 'vform';
Vue.component(HasError.name, HasError);
Vue.component(AlertSuccess.name, AlertSuccess);
Vue.component(AlertError.name, AlertError);

export default ({ app }, inject) => {
Form.prototype.submit = function submit(method, url, config = {}) {
this.startProcessing();

const data = method === 'get' ? { params: this.data() } : this.data();

return new Promise((resolve, reject) => {
  app.$axios
    .request({
      url: this.route(url),
      method,
      data,
      ...config
    })
    .then(response => {
      this.finishProcessing();
      resolve(response);
    })
    .catch(error => {
      this.busy = false;

      if (error.response) {
        this.errors.set(this.extractErrors(error.response));
      }

      reject(error);
    });
});

};

app.$vform = (...params) => new Form(...params);
inject('vform', (...params) => new Form(...params));
};