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.
Related
I have installed Bootstrap Vue using the instructions here:
https://bootstrap-vue.org/docs/icons
I am on the latest version of each dependency:
"bootstrap": "^5.2.0",
"bootstrap-icons": "^1.8.1",
"bootstrap-vue": "^2.22.0",
In my src/main.js I am importing Bootstrap and the IconsPlugin like this, as directed:
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
When I try to use <b-icon icon="send" /> the icon is blank. However if I use something like <b-icon icon="menu-up" /> that one works, and displays as expected.
It seems like only some icons are working, not all though. I see these packages in my node_modules folder:
Also, looking in the file here /node_modules/bootstrap-vue/src/icons/icons.js I do not see anything for the send icon.
Is Bootstrap Vue configured properly? Is the bootstrap-vue icons.js file somehow overwriting the bootstrap-icons module, since that js file does not have many of the newer icons found here?
Not sure what I am missing here, I followed exactly like they instructed.
From the Bootstrap Vue link you posted:
Bootstrap Icons v1.5.0 were added in BootstrapVue v2.22.0.
"send" icon was added in 1.7.0.
The bootstrap-vue docs has an icon explorer section you can search for available icons. Searching for "send" shows No matching icons found. Try searching again. It appears you're trying to use an icon that isn't available.
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?
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?
Can i use bootstrap in a vue project along side sass. Is there any way to use bootstrap classes with pug.
I have tried to install bootstrap using this tutorial:https://travishorn.com/adding-bootstrap-to-a-vue-cli-project-98c2a30e0ed0
when i add the following commands in main.js file.
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
It is giving me:
No PostCSS Config found in: /home/sidra/gekko/node_modules/bootstrap/dist/css
at /home/sidra/gekko/web/vue/node_modules/postcss-load-config/index.js:51:26
I think I might be late with my answer, but I will answer, anyway, because I had the same issue today.
The idea is that package.json is storing your PostCSS configuration. So, you need to at least add PostCSS options key if it wasn't set yet:
"postcss": {
"options": {},
"plugins": {
"autoprefixer": {}
}
}
UPD: by the way, I think this type of error appears with external CSS only and pug might not be related.
I have a question regarding loading the dependencies using Bower.
I have bower.json like
{
"name": "My project",
"version": "0.1",
"dependencies": {
"angular": "~1.2.0",
"angular-bowser": "~0.0.1"
}
}
//I want to add alert.js dependency
I was hoping to add a custom bootstrap JS file that is only for alert. I am not sure how to add the custom file since I can't run bower install to install the custom file.
Any tips? Thanks a lot!
You add bootstrap as a Bower dependency. Then in whatever other tool you're using to either generate <script> tags or generate a single concatenated JS file, you add Bootstrap's alert.js (and any other Bootstrap jQuery plugins that Alert depends on) to the list of required JS files.
Speaking more generally, Bower is an pretty minimalistic package manager, to the point that it is arguably not very useful, as it provides relatively little metadata and leaves many issues to instead be dealt with by other tools or by the user manually. Hence, what you're asking for here goes beyond the realm of Bower itself.