When I try to use the vue-custom-component, I get an error on the vue-router
import Vue from 'vue'
import vueCustomElement from 'vue-custom-element';
import App from './App.vue'
import router from './router'
import store from './store'
import Element from 'element-ui'
import elementLocale from 'element-ui/lib/locale/lang/ru-RU'
import VueFullPage from 'vue-fullpage.js'
import Testing from '#/components/Testing.vue'
Vue.config.ignoredElements = [
'example-component'
];
// Enable the plugin
Vue.use(vueCustomElement);
// Register your component
Vue.customElement('example-component', Testing, {
// Additional Options: https://github.com/karol-f/vue-custom-element#options
});
Vue.use(Element, { locale: elementLocale });
Vue.use(VueFullPage);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
import 'element-ui/lib/theme-chalk/index.css';
import './assets/css/fonts.scss';
import './assets/css/main.scss';
import 'animate.css';
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>testing_baziron_vorobjev</title><link href=./css/app.1fe0df1e.css rel=preload as=style><link href=./css/chunk-vendors.9205998e.css rel=preload as=style><link href=./js/app.10a7c671.js rel=preload as=script><link href=./js/chunk-vendors.9cb8b2ec.js rel=preload as=script><link href=./css/chunk-vendors.9205998e.css rel=stylesheet><link href=./css/app.1fe0df1e.css rel=stylesheet></head><body><noscript><strong>We're sorry but testing doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><example-component></example-component><script src="https://unpkg.com/vue"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script><script src=./js/chunk-vendors.9cb8b2ec.js></script><script src=./js/app.10a7c671.js></script></body></html>
I used the vue-cli3. Made a small application;
I did everything on instructions; After the command NPM rub build jump errors
The application itself is being downloaded. But errors appear. And if I corrected the picture errors, then the first one I can not fix
Related
I am trying to set up my vue application so customers can send emails to a address. My application was working fine but when I installed the firebase, send grid and node mailer packages, this error gets displayed
error in external "https://smtpjs.com/v3/smtp.js?vue&type=script&lang=js&"
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
ERROR in external "https://smtpjs.com/v3/smtp.js?vue&type=script&lang=js&"
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
# ./src/views/Home.vue 2:0-75 3:0-70 3:0-70 10:2-8
# ./src/router/index.js 3:0-37 17:13-17
# ./src/main.js 4:0-30 12:2-8
my main.js file
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
I have ran some test emails and they seem to be sending fine, but I can't deploy my application now.
I believe you should convert your dynamic imports to static like converting this:
Import ... from moduleName();
To this
import ... from 'moduleName':
i have use realm sdk in vue2 with this syntax
// file scr/plugins/realm.js
import Vue from 'vue';
import {App} from 'realm-web';
Vue.prototype.realmApp = new App({id: 'artes-realm-vl12'})
//file scr/main.js
import './plugins/realm';
but in Vue3 this syntax is't working anymore can you please help me how to solve with this problem thank you
In main.js add that app as global property :
import {createApp} from 'vue'
import {App} from 'realm-web';
import app from './App.vue'
const myApp=createApp(app)
myApp.config.globalProperties.realmApp = new App({id: 'artes-realm-vl12'})
myApp.mount('#app');
I am learning Vue.js.
I have this code which runs fine :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router)
app.mount('#app')
Now I would like to add some import, for example 'axios'. This code does not run :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router).use(axios)
app.mount('#app')
The error is:
Uncaught RangeError: Maximum call stack size exceeded
at merge (utils.js?c532:276)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
So how to add some other "use" in the main.js file ? It is certainly very basic but I am a beginner.
You're using vue 3 and axios is not a plugin (we cannot register it like app.use()) it's a javascript module that could be add to the app instance like :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router)
app.config.globalProperties.axios=axios
app.mount('#app')
and in child component reference it like :
this.axios
Note: the code below is valid for Vue 2.x. Since version 3, some stuff has changed regarding initialization (createApp function is now required).
What I usually do in my code is the following:
import Vue from 'vue';
import axios from 'axios';
// Add it to Vue prototype (use any variable you like, preferrably prefixed with a $).
Vue.prototype.$http = axios;
// Instantiate the main vue app.
let app = new Vue({
//
});
This means that the $http object is now available in all your components using this.$http. Since it is assigned as a prototype variable, it is considered a singleton (it is re-used everywhere), so you can add any options you need to the axios variable before assigning it to Vue.prototype.$http.
Additionally:
Vue.use() is made specifically for enabling Vue plugins. That means the given parameter must use the exact syntax as described here https://v2.vuejs.org/v2/guide/plugins.html . Since axios is not a Vue plugin but just a regular JavaScript library, you cannot use it with this function.
If you want to make it especially nice (or convoluted), you can use the following syntax:
Vue.use({
install(v) {
v.prototype.$http = axios;
// Do other stuff like adding mixins etc.
}
})
This may clear up your code if you move this code to another file, so it could end up like this:
import myCustomAxiosLoader from './bootstrap/axios';
Vue.use(myCustomAxiosLoader);
I am using vue-recaptcha-v3 in a VueJS app but am immediately getting an error. My main.js looks like this:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, { siteKey: 'MYSITEKEY' })
Vue.use(Buefy)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Unfortunately when I hit save I get the error below (screenshot included):
Uncaught TypeError: vue_1.ref is not a function
which relates to the following piece of the vue-recaptcha-v3 package:
exports.VueReCaptcha = {
install: function (app, options) {
var isLoaded = vue_1.ref(false);
var instance = vue_1.ref(undefined);
Not sure where to go from here...
I have had the same issue, it seems the most recent package version has this obvious runtime error. However version 1.9.0 works great. So just remove the current package if you use yarn run the following (otherwise the npm equivalent):
yarn add vue-recaptcha-v3#1.9.0
vue-recaptcha-v3 master branch is now using Vue 3.
You're probably using Vue 2, so you should follow the instructions here.
If the type of the package does not influence much what you need. here's one that i use and that works for me.
Link: https://www.npmjs.com/package/vue-recaptcha
After installing you just need to import it into your form.
import VueRecaptcha from 'vue-recaptcha';
Using:
<vue-recaptcha
#expired="captchar = false"
class="mr-8"
#render="cargarCaptchar = true"
#error="captchar = false"
#verify="captchar = true"
sitekey="your code"/>
If that doesn't work, add the following tag to the page header:
<script src = "https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" defer> </script>
If you find that this is not feasible for your project. No problem, as I still think you can help other fellow beginners.
Using vue-auth (vue-auth on GitHub) with the Axios HTTP driver I get the following error in the browser console:
TypeError: this.Vue.axios is undefined
main.js
import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
import "./libs/vue-auth";
./libs/vue-auth.js
import Vue from "vue";
import vueAuth from "#websanova/vue-auth";
import bearer from "#websanova/vue-auth/drivers/auth/bearer";
import axiosHttp from "#websanova/vue-auth/drivers/http/axios.1.x";
import vueRouter from "#websanova/vue-auth/drivers/router/vue-router.2.x";
// Vue.axios = axios;
Vue.use(vueAuth, {
auth: bearer,
http: axiosHttp,
router: vueRouter
// ...
});
When removing the comment for Vue.axios = axios; it seems to work at first glance. So I thought moving Vue.axios = axios; to the main.js but then again it's not working.
Vue.axios can be assigned either manually or with vue-axios plugin. Since #websanova/vue-auth/drivers/http/axios.1.x expects it to exist on plugin initialization:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
...
Vue.use(VueAxios, axios)
Vue.use(vueAuth, ...)
Moving Vue.use(VueAxios, axios) to main.js won't work because it should be evaluated before ./libs/vue-auth is imported, and it cannot precede import according to JS specs. Vue.use(...) should either moved to main.js together, or they both should be located in ./lib modules.