Add npm modules to Piranha CMS - vue.js

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?

Related

Quasar: Building a Quasar component library that exports Quasar with it

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.

Publish custom vue component library npm package with friendly import alias for components

I have a vue 3 component library published in an internal nexus npm repo as a package.
It is normally a dependency for other vue projects that consume the *.vue ui components in the library, and have an entry like
"dependencies": {
"#namespace/package-name": "^3.1.1",
So far I consume the library components within the end project importing like:
import componentName from '#namespace/package-name/src/components/atoms/component-name';
But I am planning to set an index.js file in /src/components/ so I can use something simpler like
import componentName from '#namespace/package-name';
The index.js file is as follows:
export { default as ActionButton } from './atoms/action-button/index.vue';
export { default as Autocomplete } from './molecules/autocomplete/index.vue';
export { default as Avatar } from './atoms/avatar/index.vue';
...
Note that I split html, js and css in three different files and that's why I have an index.vue file calling them three, but it is like using a compo.vue file. Also, inside /src/components, I have folders like atoms, molecules, organisms... due to atomic design.
From the read docs, I am trying to set rules in the package.json file of the library, like:
"exports": {
".": "./src/components/index.js"
},
but without luck, having the mentioned import (import componentName from '#namespace/package-name') giving the error:
ERROR Failed to compile with 1 error 14:46:12
This dependency was not found:
* #namespace/package-name ...
I have no other special entries in the lib's package.json file, regarding publishing.
Am I using the exports entry correctly, or should I use other?
Whats the way to proxy or alias all my components (placed in different folders and so) under a simple, accesible path when importing them in the final projects?

#vue-icons/feather dependency was not found

I've got a simple Nuxt project that I'm working on, I installed Vue Icons and tried to add a search icon to my component, but when compiling I get the following error:
This dependency was not found:
* #vue-icons/feather in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/SiteHeader.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save #vue-icons/feather
But I already have it installed, both on my src, and functions folders (I'm hosting on firebase)
"dependencies": {
"#nuxtjs/firebase": "^7.6.1",
"#vue-icons/feather": "^1.0.19",
"firebase": "^8.9.1",
"isomorphic-fetch": "^3.0.0",
"nuxt": "^2.0.0"
}
The import statement I'm using is the one directly copied from the website
import { SearchIcon } from "#vue-icons/feather";
I some similar questions I read talked about transpiling the library, but that did not seem to work, do I need to add 3rd party libraries to some other part of the nuxt.config file?
I'll quote what is written in the documentation
This project aims to regroup [...] common icons pack for Vue 3.
Nuxt2 is not compatible with Vue3.
If you want to use the exact same vue-feather-icons library, please use this package for that purpose.
It should work as easily as
<template>
<div>
<ActivityIcon />
</div>
</template>
<script>
import { ActivityIcon } from 'vue-feather-icons'
export default {
components: {
ActivityIcon
}
}
</script>
Otherwise, I can also recommend unplugin-icons which will provide a LOT more and will be really flexible. And which also totally contains the icons you're looking for.
Awesome package, to not have to deal with all the annoying parts of looking up for a working packages on top of the other features.

Vue-test-utils using mixin for vee-validate in nuxt

I'm trying to test if validation works for a form with vee-validate and vue-test-utils. I also use nuxt and have created a custom plugin which install vee-validate and provides two custom computed properties as a mixin.
The problem is that I need a way to use these mixins within a localVue instance, however, I cannot just import the whole file as it results in vee-validate being installed two times on the main vue instance. I also cannot just say localVue.use(MyCustomVeeValidatePlugin) because the plugin doesn't have an install method ("plugins" in nuxt are somewhat different than in vue).
What works is creating a file which exports isFormValid and isFormChanged and then have the plugin import these methods. Then I also need to import these methods in the test file and create a mixin for the localVue instance. I would much rather prefer defining the mixin in a single plugin file. I know this is very specific but has anyone had a similar problem? I could imagine rewriting the plugin to be more like it is defined in the Vue.js docs (with an install method) and install it somehow.
Plugin:
import Vue from "vue";
import VeeValidate from "vee-validate";
Vue.use(VeeValidate);
//create global mixin for checking if form is valid
//note: every input element needs a name
Vue.mixin({
computed: {
isFormValid() {
return Object.keys(this.fields).every(key =>
this.fields[key].valid);
},
isFormChanged() {
return Object.keys(this.fields).some(key =>
this.fields[key].changed);
}
}
});
As far as I know, based on the recommendations I read in "Testing VueJs Applications (https://www.manning.com/books/testing-vue-js-applications), the author, who is also the main author of the vue-test-utils recommends:
I’ve already spoken about why you should use a localVue constructor and avoid installing on the base constructor. This is especially important for Vue Router. Always use a localVue to install Vue Router in tests. You must make sure that no file in your test suite imports a file that calls Vue.use with Vue Router. It’s easy to accidentally import a file that includes Vue.use. Even if you don’t run a module, if the module is imported, then the code inside it will be evaluated.
Based on that recommendation, I moved Vue.use() calls out of files like store.js and router.js and into main.js, which isn't used during testing.

#vue/cli application build fail using my library

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?