I'm trying to track all visited page in my vuejs App, but is not working.
main.ts
import VueGtag from 'vue-gtag';
Vue.use(VueGtag, {
config: { id: process.env.VUE_APP_GA },
enabled: false
}, router);
new Vue({
router,
render: h => h(App)
}).$mount('#app');
Also I try to add an event in the header, but is not working anyway.
this.$gtag.pageview("/about");
this.$gtag.event('header', {
'event_label': 'header',
'event_category': 'test',
value: 1
});
I'm using Vue version 2.6.11 and vue-gtag 1.6.1.
Try to remove line:
enabled: false
From official document link
The plugin will immediately start tracking, but it is possible to disable the plugin at start by set enabled: false
Related
I'm trying to use vue-router based on the examples, such as
let routes = [
{ path: '/', component: MainComponent },
];
let router = new VueRouter({routes});
new Vue({ router }).$mount('#app');
but I always get this error:
vue.runtime.esm.js:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.
Can I fix this by using the render function? I tried,
let routes = [];
But still fails.
Ok, I spent a half day on this and I finally got it working: vue-router + webpack + runtime-only vue.
This tutorial was the most helpful. What I learned:
If you use vue-cli, the vue version is in the webpack.base.conf.js
vue.esm.js will include the compiler
vue.runtime.esm.js will NOT include the compiler
If you want to use runtime, you must change your main.js. Do NOT use this
new Vue({
el: '#app',
router,
template: '<App/>', // <== This is bad
components: { App }
});
and instead DO use this
Vue.use(VueRouter); // <== very important
new Vue({
router,
render(createElement) {
return createElement(App);
}
}).$mount('#app');
You can use either $mount or the el: with runtime. Both work, but the $mount gives you more flexibility. And of course the router is created the usual way
let routes = [
{ path: '/', component: MainComponent },
];
let router = new VueRouter({ routes });
And if you are still seeing the error
[Vue warn]: You are using the runtime-only build of Vue
in the console, then make double sure that you never ever in your code use any templates with strings. Even inside your *.vue files, if you try to do
const Foo = { template: '<div>foo</div>' };
it will fail. Instead you must either use <template> tags, or else you must use createElement. Good luck!
The accepted solution is right in that you cannot use string template with runtime only Vue, and you have to implement the render function. However, if you want to render components at the top level instead of using router-view, you can get the matched component and render it manually:
const routes = [
{ path: '/about', component: About },
{ path: '/index', component: App },
{ path: "*", component: App }
]
new Vue({
router,
render: h => {
return h(router.getMatchedComponents()[0])
},
}).$mount('#app')
It appears to be impossible to use the runtime, based on these two MREs (one with, one without runtime). If nothing else, you can use these snippets if you choose to post an issue on their github or the vue forums, or another answer can use them as a template to prove me incorrect. This assumes you're not using vue-cli. With vue-cli you need to opt-in to including the compiler in your builds. See https://cli.vuejs.org/config/#runtimecompiler and https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
Fails (console warning - vue runtime)
let routes = [
{
path: "",
component: {
render(h) {
return h("div", "hello world");
}
}
}
];
let router = new VueRouter({ routes });
new Vue({ router }).$mount("#app");
<script src="https://unpkg.com/vue/dist/vue.runtime.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<router-view></router-view>
</div>
Works (no console warning - full vue)
let routes = [
{
path: "",
component: {
render(h) {
return h("div", "hello world");
}
}
}
];
let router = new VueRouter({ routes });
new Vue({ router }).$mount("#app");
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<router-view></router-view>
</div>
For Vue 3 (here with TypeScript), the trick is to use the h component render function as the result of the setup function as the top-level component instead of the default createApp({}) which appears to be interpreted as a template.
So I have:
const app = createApp({
setup() {
const component = computed((): Component => {
const res = router.currentRoute.value.matched
if (res.length > 0 && res[0].components)
return res[0].components.default
else
return Loading
})
return () => h(component.value)
}
})
...
vue-router's Router exposes a ready-to-render component in property currentRoute.value.matched[0].components.default. Be sure to check for a match and for the component to be loaded (this works for lazy components as well imported using () => import('path/to/Component.vue')).
Obviously, the router is integrated into the app and and the app mounted this way, with the router being created using createRouter:
...
const router = createRouter({
history: createWebHistory(),
routes: [
...
]
})
app.use(router)
app.mount('#app')
In the index note that <router-view/> is not used. Probably was the only thing using the runtime compiler, think about a waste of space as the recommended option in the docs! The little extra effort in the root component to make it static is definitely worth it. The index looks like this:
<!DOCTYPE html>
<html class="dark" data-theme="dark">
<head>
<meta charset="utf-8"/>
<title>Title</title>
<script type="module" src="/src/main.ts"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
Tested with Vite, allows to have vue: 'vue/dist/vue.runtime.esm-bundler.js'. Pretty compact!
I have installed Vuetify as they recommend on their website and added it to my app.js.
require('./bootstrap');
import vuetify from './plugins/vuetify';
window.app = new Vue({
vuetify,
el: '#app',
components: {
},
data: {
},
methods: {
}
});
However i'm still getting errors when attempting to use the component's such as v-switch within the app element and also within other components.
Error:
Unknown custom element: <v-switch> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I have tried to access to others pages via url, but those pages never loads
http://localhost:8080/index
http://localhost:8080/about
This is my main.js file
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
import Index from './views/Index';
const About = { template: '<p>about page</p>' }
const routes = [
{ path: '/index', name: 'index', component: Index },
{ path: '/about', name: 'about', component: About }
]
var router = new VueRouter({
routes: routes,
mode: 'history'
})
new Vue({
router: router,
vuetify,
render: h => h(App)
}).$mount('#app')
Does anyone can help me with vue-router? i am new in this framework
Does it work if you access them like this:
http://localhost:8080/#/about
If yes, your vue-router is working in the default hash-mode. To get rid of the hash and get "normal" URLs you'll need to set it to history mode.
Edit:
As I see you're already using history mode. Do you use Vue CLI for local development? This should normally work out of the box. If not, you need to setup some redirect rules on other web servers. Please see the examples here: Example Server Configurations
Edit 2:
Can you show your App component?
I tried to reproduce your problem in a sandbox, but it works: https://codesandbox.io/s/confident-voice-zyg07
The App component here looks like this, including the router-view:
<template>
<div id="app">
<router-view id="page"/>
</div>
</template>
<script>
export default {
name: "App",
components: {}
};
</script>
I don't know why, but vue stops working, in the html doesn't appear the router-view and it appears like a comment:
I have the standard code with webpack, and always works, but now now.
import router from './router/index'
new Vue({
router,
el: '#app',
store,
mixins: [Vue2Filters.mixin],
components: {
TopMenuComponent,
EventItemComponent,
GoTopComponent,
},
i18n
}).$mount('#app')
router
export default new VueRouter({
routes: [
// AUTH ROUTES //
{
path: '/',
name: 'Login',
component: LoginPageComponent
},
...
The curiosity is that in the local machine it works fine, but when I put exactly the same code in another server, doesn't work. Any ideas?
EDIT:
The JS console is blank, no errors, no warnings
I have a vue app like this:
Vue.component('navigation', Navigation)
Vue.component('create', Create)
Vue.component('how', How)
Vue.component('about', About)
Vue.component('youtube', Youtube)
new Vue({
el: '#app',
data: {
currentView: 'create'
},
mounted() {
pace.start()
}
})
So what I want to achieve is for pace to start while a component is loading and stop it when it is finished loading that component, however, pace is not being started. Am I not doing it properly here?