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
Related
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')
I made a fairly simply Quasar component library using Vite.
npm install avvinue-clowder
However, I'm now unable to get it to work as intended within other Quasar apps.
For example if I do:
import { AVRow } from 'avvinue-clowder'
and use it within the template:
<AVRow>Foobar</AVRow>
I get the following error:
I think its because Quasar doesn't get exported with the components. Anyone know how to do that?
Here is my repo: https://github.com/RizaHKhan/clowder/tree/master/src for reference.
Note:
I know this library works because the exports that are pure Javascript, work fine. Its just the Quasar based components that throw errors.
I have a problem, I cannot use SSR from the official documentation https://ssr.vuejs.org/ in any way, I could not include any module using the native way of creating SSR. I always get an error window is not defined even if the module has adaptations for SSR. Why is vue-server-renderer not working?! Why should I definitely use Nuxt.js?
My project use vue v2.x and webpack v4.x.x, because SSR modules with Vue2 is not working with webpack version 5.x.x, but I guess that's not the reason
For example i use vue-js-modal module, which having ssr include files, but it is not working, if i include it with code
import Vue from 'vue'
import VModal from 'vue-js-modal/dist/ssr.nocss'
import 'vue-js-modal/dist/styles.css'
Vue.use(VModal, { ... })
I getting this errors
vue-ssr-server-bundle.json
Compilation Time: 749.594ms
ReferenceError: window is not defined
at Module.o.m.n (/var/www/contest.mathzilla.org/public_html/frontend/node_modules/vue-js-modal/dist/ssr.nocss.js:1:14289)
at o (/var/www/contest.mathzilla.org/public_html/frontend/node_modules/vue-js-modal/dist/ssr.nocss.js:1:32717)```
I am building a webcomponent package using Vue CLI 3 and single file components. We have a shared package our-awesome-shared-controls that contain basic site components such as a collapsible container.
Inside my component, I import and reference the collapsible container and wrap my content in it. When I build as an app the styles from the imported components are included and everything looks great, however; when I target wc (WebComponent) using the vue-cli the style for the imported component (collapsible container) are not included.
Is there a way for me to tell the vue cli that it should include those styles? If not would there be a way to import those styles? The imported components have their style set to scoped so I'm not sure if that makes a difference.
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.