unload script
3blake7 opened this issue · comments
i have ckeditor and google's recaptcha external js files and i only want to add them to the pages with forms. when i load them on mounted () { they are still loaded when i go to a new page. is there a way to unload them when i go to a new page? i am use vue, vuetify and vue-router.
thanks! i was surprised that vue didn't include your feature officially. it would be nice to have a way to load external js files and not cause "error: 'CKEDITOR' is not defined" when i "npm run serve"
I've added your feature suggestion, please let me know if it suits your needs!
I couldnt get it to work, maybe my setup is different.
router.js
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
},
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ './views/Login.vue')
},
views/Login.vue
<template>
<div>
<DisplayAlert />
<LoginForm />
</div>
</template>
<script>
import DisplayAlert from '../components/DisplayAlert'
import LoginForm from '../components/LoginForm'
export default {
components: {
DisplayAlert,
LoginForm
}
}
</script>
components/LoginForm.vue
mounted () {
this.$loadScript("https://www.google.com/recaptcha/api.js?render=6LeTonoUAAAAAF5EJSdJ80adJI0-oYFgTR9_tUlS")
.then(() => {
grecaptcha.ready();
})
.catch(() => {
console.log('recaptcha failed to load');
});
},
unmounted () {
this.$unloadScript("https://www.google.com/recaptcha/api.js?render=6LeTonoUAAAAAF5EJSdJ80adJI0-oYFgTR9_tUlS")
}
my menu is in app.js
<v-btn flat to="/login"><v-btn flat to="/login">
according to vuetify, to= uses vue-router
i found another plugin called script2 which claimed to do do per component loading and unloading but i couldnt get it to work. i guess i might have it setup wrong
There is no unmounted
lifecycle hook in Vue -- I think you're looking for destroyed
i actually tried beforeDestroy and destroyed first, that didn't work. i think i figured it out, your module and probably script2 was successfully removing the .js but the google recaptcha badge was still present because the javascript injected an i frame. i wasnt sure the js was being removed because webpack chops up all the js.
document.getElementsByClassName('grecaptcha-badge')[0].remove();
thanks for your help!