I have a Vue app with with Nuxt and I am instrumenting it with Amplitude. I have already installed nuxt-amplitude via npm and actually I can log in .vue modules using
this.$amplitude.getInstance().logEvent('event')
But now I want to log from a .js file in a vue store module but it doesnt work. Any idea?
I tried using
this.$amplitude.getInstance().logEvent('event')
this.$nuxt.$amplitude.getInstance().logEvent('event')
amplitude.getInstance().logEvent('event')
Related
I am new to nuxt js. I have a template of nuxt js which I am working on. In router.js I added some new routes, that's working fine, but when I run my development server again npm run dev, the updated code is just removed. I see the old code there. And it only does for the .nuxt folder. Not for the vue components.
Can anyone suggest something? Thanks.
Nuxt uses a method called File system routing, with that routes.js file is automatically generated according to your configuration and pages created, that is why your changes get removed
If you have a specific requirement that need more customization you can extend the router config
I want to be able to use Vue components distributed over CDN without the need to npm install them - in my single-file Vue components.
I do not understand how to import them by URL to compiled component.
Example of components I want to import is
https://unpkg.com/vueperslides (from https://antoniandre.github.io/vueper-slides/#installation)
As I understand there is a way to load JS file in mounted() hook or something, but I don't understand how to import exports from it after.
Answers I tried include
https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/
How to add external JS scripts to VueJS Components
and many others.
I am building a web app using Quasar Framowrk on Vue.js v2
I'm having a Nuxt.js project where I try to use the qrcode-scanner library
I fallow the steps to register globaly.
I made a js file in plugins folder and add the fallowing code
import Vue from "vue";
import VueQrcodeReader from "vue-qrcode-reader";
Vue.use(VueQrcodeReader);
It looks pretty straight forward, but my app crashes and never loads. Anyone experienced this problem ?
i test your code and it works for me by the way i explain my steps for you, maybe you forget one step:
install package with npm install vue-qrcode-reader
make file named qr.js in my plugin folder
then put this code on it:
import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'
Vue.use(VueQrcodeReader)
add plugin to my nuxt.config.js file :
plugins: ['~/plugins/qr']
NOTE:qr is the name of my file(qr.js)
use the plugin in my vue page with adding following code in it's place:
<qrcode-stream></qrcode-stream>
<qrcode-drop-zone></qrcode-drop-zone>
<qrcode-capture></qrcode-capture>
I'm starting from scratch and using the default create project from vue using cli 3. Everything is fine, however I noticed the chunk-vendors.js file contains vue.js.min. I don't want to include that file, how do I tell the vue to not include it in production builds?
If you want to exclude Vue from being bundled, use the library build target.
In lib mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. If the lib is used via a bundler, it will attempt to load Vue as a dependency through the bundler; otherwise, it falls back to a global Vue variable.
I am trying to create a plugin that utilizes components from another Vuejs plugin (Vuetify). Basically, I have some common components I want to share across multiple applications with our company.
I thought it would just be a matter of:
Create a github repo for the shared components
Author the plugin
Reference the repo in consuming apps via npm install
Here is the gist of the plugin:
// src/index.js <-- package.json/main is set to "src"
import MyComponent from "./MyComponent.vue";
import * as api from "./api";
export default function install(Vue) {
Vue.component("myComponent", MyComponent );
Vue.prototype.$myApi = api;
}
At the moment, the behavior I'm seeing is:
GOOD
plugin install function is being executed
functions from api attached to Vue.prototype are available in app components
my-component is available in the app and renders markup
BAD
$myApi and Vuetify components are not available in an application instance of of my-component
If I copy the same files into the app and change my import, all works as expected. So, I now wonder if I'm missing something regarding sharing code via external modules.
I've tried these alternatives with the same issue:
use npm link to link the plugin module to the app
manually, use mklink (Windows sym link) to link plugin module to node_modules in the app folder
use a long relative path reference to the plugin module: import MyPlugin from "../../../my-plugin"
I've put this issue off for a while, but for anyone wondering, the issue is with using Single File Components and webpack not compiling those in external modules.
The 2 options I have are:
Don't use Single File Components. I.e.: Just use .js instead of .vue. I've seen some libs like Vuetify.js take this approach
Compile the .vue files in the library module and include them in the source such as ./dist folder.