I get the error message as soon as I add this reference in my vue component:
<script setup>
import { ExclamationTriangleIcon, XMarkIcon } from '#heroicons/vue/24/outline'
I am using tailwindcss 3.1.8.
I have executed this:
npm install #headlessui/vue #heroicons/vue
I have version 1.0.6 of heroicons installed. Why is the icon not found?
Looks like heroicons 1.0.6 is outdated. Had to get version 2.0.* by calling
npm install #heroicons/vue#latest
Import of icons had to be changed from '#heroicons/vue/**' to '#heroicons/vue/24/*'
I also had to switch some old icons with new ones, as they may have been renamed or removed. New Icons may be found at https://unpkg.com/browse/#heroicons/vue#2.0.10/24/outline/ (the page https://vue-hero-icons.netlify.app/ does not work as it still contains old ones)
Related
I am trying to add primevue to my jhister with vue.js application. And I am following these steps.
1- run these comments
npm install primevue --save
npm install primeicons --save
2- add them to my vendor.scss
#import '~primevue/resources/primevue.min.css';
#import '~primevue/resources/themes/nova-light/theme.css';
#import '~primeicons/primeicons.css';
3- when I run npm start command. I am getting these error.
ERROR in ./src/main/webapp/content/scss/vendor.scss (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src??ref--9-2!./
node_modules/sass-loader/lib/loader.js??ref--9-3!./src/main/webapp/content/scss/vendor.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'node_modules/primevue/resources/primevue.min.css'
in [
C:\work\workspace\aymer workspace\fiyatkolay\fiyatkolayweb\src\main\webapp\content\scss
]
at resolveModule.catch.catch (C:\work\workspace\aymer workspace\fiyatkolay\fiyatkolayweb\node_modules\postcss-import\lib\resolve-id.js:35:13)
# ./src/main/webapp/content/scss/vendor.scss 4:14-231 14:3-18:5 15:22-239
# ./src/main/webapp/app/main.ts
# multi (webpack)-dev-server/client?http://localhost:9060 ./src/main/webapp/app/main.ts
how can I integrate primevue with my jhipster app.
Thank you for your help!!!
I'm not very experienced with Vue but the official documentation examples import the CSS files directly. I checked primevue-quickstart and integrated both libraries successfully that way.
1. Install primevue and primeicons
Open a terminal and execute the following command if you are using npm:
npm i primevue primeicons
Or the following if you are using yarn:
yarn add primevue primeicons
2. Add the required CSS files
Open your main.ts file and add the following lines near the top:
import 'primevue/resources/themes/nova-light/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
3. Import the components you want to use
You can add the following lines of code to your main.ts file if you want all the PrimeVue components to be globally available. Or add them to [component-name].component.ts (e.g. home.component.ts) if you only want to make them available in a specific view.
import Button from 'primevue/button';
Vue.component('Button', Button);
4. Use the PrimeVue component in your view
Open your [component-name].vue (e.g. home.vue) file and start using the UI component by adding the HTML markup. I imported the Button component so in my case it's something like this:
<Button label="Click" icon="pi pi-check" />
I'm pretty sure we should be able to use both libraries the way you tried first, but I could not make it work any other way.
I cloned an existant Vuejs project and made a "npm install".
Everything installed well except "moment" and maybe "vue-moment".
i've got this error :
Failed to compile.
./src/main.js
Module not found: Error: Can't resolve 'moment' in '/app/src'
so in installed them with "npm install --save moment vue-moment"
And still got the error.
here some code of my main.js file :
import moment from 'moment'
import VueMoment from 'vue-moment'
// Vue use moment.js
Vue.use(VueMoment, {
moment
});
moment.locale('fr');
the packages are installed and present in the node_modules folder and are present also in the package.log.json and package.json.
The weird things is, when other people clones this project, they don't have the problem. only me...
One (maybe) pist, is when i put my mouse hover the 'moment' (of the import), i see this :
.../node_modules/moment/moment like there is 2 moment folders, but it looks normal in the node_modules folder.
Thanks in advance!
EDIT SOLVED :
The problem was because i started the project with "docker-compose up" and not "npm run serve" on the FRONT. It started but i had this "moment" problem. Now it works well with the good console code to start the project ...
You cannot use the import function with moment.js since exports is not defined for that module. So you have to use require. You can do this :
Vue.use(require('vue-moment'));
If you really want to use moment.js using import you can do this as well.
import * as moment from 'moment';
Reference: https://www.npmjs.com/package/vue-moment
https://momentjs.com/docs/
Webpack / typescript require works but import doesn't
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
I just started getting this error today, and it broke my whole site (because like a fool I'm loading Vuetify on page load).
Does anyone know what this means or how to fix it? Googling around didn't reveal anything helpful.
Edit:
To anyone who finds this because their site is also broken, it may be because of where you were loading vuetify.min.css from. For me I was getting at page load like so:
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
And solved the problem by importing it from the installed package instead with
import 'vuetify/dist/vuetify.min.css'
in app.js.
I'm still interested in learning about this v-ripple business, though.
I got into the same problem and I solved by installing
material-design-icons-iconfont
Run the following command to install:
npm install material-design-icons-iconfont
or, if you are running from yarn then:
yarn add material-design-icons-iconfont
Now import in main.js file:
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
You can read the vuetify documentation for more information:
Vuetify Documentation
I ran into this same issue today and started going down the route of importing it as suggested above when I noticed the header:
#charset "UTF-8";
/*!
* Vuetify v2.0.0-alpha.14
* Forged by John Leider
* Released under the MIT License.
It looks like they bumped the dist version (I'm working with 1.5.12). I updated my link href to:
https://cdn.jsdelivr.net/npm/vuetify#1.5.12/dist/vuetify.min.css
...and my site was put back together again. It's probably better practice to bring it in as a module but that'll be something for the backlog. Hope this helps somebody.
For me, the problem was I had both tslint and eslint installed. After I disabled eslint, it worked.
I set up an Aurelia project using the minimal project given here.
Then I added the fetch-client using npm install aurelia-fetch-client --save command. It updated package.json to contain following:
"dependencies": {
"aurelia-fetch-client": "^1.1.0"
}
But when I added import {HttpClient} from 'aurelia-fetch-client'; to my app.js file and tried running the app, but got following error:
system.js:4 GET http://localhost:5000/aurelia-fetch-client 404 (Not Found)
How do I add that? Where does this project keep track of its dependencies? I have seen lots of tutorials which help setting up the fetch client in aurelia cli projects. How about the project given here?
First, follow Fabio Luz's advice above and actually install either aurelia-cli or a skeleton framework.
Then, I have found this next step to be one of the most common sources of confusion for most people who are learning Aurelia. After installing new modules via npm, you have to manually list them as a dependency in aurelia.json (in your aurelia_project folder). For example, you would list aurelia-fetch-client as follows:
"dependencies": [
"aurelia-binding",
"aurelia-bootstrapper",
"aurelia-dependency-injection",
"aurelia-event-aggregator",
...
"aurelia-fetch-client",
...
After it is listed as a dependency, it will be included in the vendor.js bundle (in the CLI, by running au run --watch) so that it can be accessed by your application when you import it in individual components.
import {HttpClient} from 'aurelia-fetch-client';
For me it worked like this (using the project generated by the CLI):
npm i whatwg-fetch --save
npm i aurelia-fetch-client --save
add "aurelia-fetch-client" to dependencies in aurelia_project/aurelia.json
example of app.js:
import {HttpClient} from 'aurelia-fetch-client';
let client = new HttpClient();
export class App{
activate(){
client.fetch('http://...json');
.then(response => response.json())
.then(data =>{
console.log(data)
});
}
}
You can also install dependencies with the CLI itself.
It doesn't always get it 100% correct but can point you in the right direction if struggling.
For example au install aurelia-fetch-client
It will download the dependency, add to packages.json and attempt to create an entry for the bundling.