Hi!
In my nuxt.config.js I am loading a 'global' js where everything I need everyone is defined. I am doing it like this:
plugins: [
{
src: '~/plugins/global',
ssr: false
}
],
and global is really just this:
import Popper from 'popper.js/dist/umd/popper.js';
import Vue from 'vue';
import VueRouter from 'vue-router';
import Axios from 'axios';
import Form from './forms/form.js';
import Global from './globals/globals.js';
try {
window.$ = window.jQuery = require('jquery');
window.Popper = Popper;
require('bootstrap');
} catch (e) {}
window.Vue = Vue;
window.VueRouter = VueRouter;
window.Form = Form;
window.Global = Global;
window.axios = Axios;
Now what is the problem.
on /login I have
export default {
data() {
return {
success: false,
failure: false,
username: '',
baseURL: process.env.API_URL,
form: new Form({
email: '',
password: ''
})
}
},
But of course, Form is defined globally so that's fine. It isn't, really. If you run npm run dev
for the first time and go to localhost:3000 and then go to /login it is fine. If I stay on /login page, make a change anywhere so that it re-compiles. I get an error saying that Form class is not defined in /login. But if I go back to root '/' and then to '/login' it works. Is there any way to avoid this behavior?