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.
Related
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 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 new to extending the Piranha CMS on the frontend side of things and I'm wanting to add more functionality to the manager pages using some libraries from npm. The CMS is using Vue, which has some helpful libraries available. I want to use
import { SomeLibrary } from "some-library"
as well as the corresponding Vue components that the library comes with (ie, <some-library/>). However, I'm unable to use them due to the way Piranha accepts custom scripts. The scripts are added into the project via
App.Modules.Manager().Scripts.Add("~/assets/js/myscripts.js");
which does not leave room for me to use modules for my javascript, as far as I know. Is there some way around this so I can use npm libraries?
More info added, here is an example of what I am trying to do and why it does not work. The file test.js is added to the project in Startup.cs with the above line.
test.js:
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
data() {
return {}
},
created() {
console.log("I am a test");
}
}
Navigating to any page in the project results in the error Uncaught SyntaxError: Cannot use import statement outside a module. I cannot add type="module" to the Startup.cs because there are no parameters to do this., and I'm not sure if that would even solve the problem. I've only ever worked with javascript using modules so I'm unsure what's going on here. Am I missing something obvious? How can you use any npm libraries (which are modules) in the project otherwise?
I'm writing a Vue component library let's call it my-component,
when I download it from npm or use npm link to test in vue/cli application,
import { component } from `my-component`
It will fail on IE... but fine with chrome
But if I put my library's source code under my application folder,
import { component } from './lib/my-component/entry.js'
everything goes well.
Why webpack/vue-cli build differently in two ways?
Did I need extra settings to publish my component as a library?
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.