In app.js:
import iconSet from 'quasar/icon-set/fontawesome-v6'
import '#quasar/extras/fontawesome-v6/fontawesome-v6.css'
and:
setup({el, app, props, plugin}) {
return createApp({render: () => h(app, props)})
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(PrimeVue)
.use(Quasar,{iconSet: iconSet,})
.mount(el);
},
In template:
<q-btn color="yellow" glossy text-color="black" push label="First" icon="fabAngular"/>
The icon prop is not woking, it writes the name of icon instead of rendering it.
Anyone any idea what I am doing wrong?
I have tried it with different icon sets, but neither seems working. Icons are not rendering, only their names is written out.
Related
I'm a beginner web developer who is working on their first project with Next.js. I have hit an error with getting SVGs to load into my project as SVGs and could use some help finding the cause of it. Following online guides, I installed SVGR and updated my next.config.js file to this:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ["#svgr/webpack"],
});
return config;
},
};
I then imported my SVG file into my component as a component (following the SVGR guide I was using):
import Pizza from "/images/icons/pizza.svg";
Which causes this error to pop up:
./pages/index.js:2:0
Module not found: Can't resolve '/images/icons/pizza.svg'
1 | import Image from "next/image";
> 2 | import Pizza from "/images/icons/pizza.svg";
I've spent the last day trying different fixes to similar issues I've found online but nothing seems to work. Can anyone spot why SVGR isn't working for me? Apologies if it's something super obvious. I appreciate any help or insight!
I need to use UI Components Vuetify with Angular, I use VueCustomElement with angular and work successfully but I tried to add Vuetify but I got some errors like missing $attr, $ ...etc.
I need to add Vuesax, Quaser, or Vuetify because I love it.
I know all types of materials like Angular material or PrimeNg but need more customized and I don't have spare time for work.
app.module.ts:
#NgModule({
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
app.component.html:
<my-vue-web-comp></my-vue-web-comp>
app.js
import Vue from 'vue/dist/vue';
import vueCustomElement from 'vue-custom-element';
import Vuetify from 'vuetify';
import {VApp} from 'vuetify/lib';
Vue.use(Vuetify)
Vue.component('v-app', VApp)
Vue.use(vueCustomElement);
const MyVueWebComp = {
template:`
<v-app></v-app>
`
};
Vue.customElement('my-vue-web-comp', MyVueWebComp);
I'm afraid you will just have to bite the bullet and either switch to Vue.js or use a framework designed for Angular. There are a lot of dependencies in Vuetify (and the others) that are written for Vue and would need to be rewritten to work in Angular. There is no simple fix.
If you really don't have the time, you could get a UI kit similar to this or this. They will usually cost at least a flat fee, but they have pre-styled UI elements similar to Vuetify.
Edit: You could also just use something like Bootstrap which has the elements pre-styled. Maybe that could be a middle ground.
I have trouble loading image(s) as Base64 data. In the following code (partially borrowed from here), the 'loading' function this.textures.addBase64 is used:
import bgSrc from '../assets/img/back.png';
...
create() {
this.numToLoad = 1;
this.textures.on('addtexture', () => {
console.log('another image loaded')
this.numToLoad--;
if (this.numToLoad < 1) this.createNext();
})
this.textures.addBase64('background', bgSrc);
...
}
createNext() {
//...use the images
}
However, the 'addtexture' event never fires. And the image, loaded this way, never loads, no matter how long I wait.
But everything goes fine if I use direct Base64 code, like const bgSrc = 'data:image/png;base64, blablablah' instead of import bgSrc from '../assets/img/back.png'. So the problem is in importing the image.
I use phaser 3 webpack in this project. plus url-loader. Maybe the url-loader is incorrectly set up? I am not sure if the url-loader is even needed for performing npm run start.
Well, it was indeed an incorrect setup of the url-loader. (I used one more plugin in the webpack, and they didn't work well together.)
So, the code above is OK after all.
This is my app structure.
Yeoman with angular and coffee server(node+express) which gets view and public files via /app/.
View files:
app.set("view_engine", "html").engine "html", (path, options, fn) ->
if "function" is typeof options
fn = options
options = {}
fs.readFile path, "utf8", fn
Public files:
app.use express.static(path.resolve(__dirname + "/app/"))
I do load a lot of components like bootstrap, theme files,etc. HOwever, Javascript inside a view file doesnt work. It does work normally.
For example, if i remove and replace with for morris charts, it works. The same with ng-app and a view file with does not load the chart.
I think the problem is loading the js files first, since when i tried logging, the javascript file sends message before the controller for the view. So i guess the js file loads before the view thereby making the id inaccessible for the javascript file.
Please tell me how to solve this. It has been bugging me for over two days.
Thanks in advance.
Probably answered here: https://stackoverflow.com/a/12200540/1794563
Are you including jQuery before angularJS? If not, angularJS is using jqLite, which won't handle a situation like that.
i am trying to use durandal.js for single page architecture,
i already have application where i am loading all pages in div = old approach for single page architecture,
what i want to do is when i click on page i need to open hotspa pages,
for now i write something like this . www.xyz.com#/details,
where # details is my durandal view page!
when i put <a> herf ....#/details, i got error like this :
http://postimg.org/image/hoeu1wiz5/
but when i refresh with same url, it is working fine, i am able to see view!
i do not know why i got this error
If you are using anything before version 2.0 of Durandal, you are getting this because in your Shell.js you are not defining router, or you have a bad definition of where the router module is, or possibly you are defining scripts in your index instead of 'requiring them' via require.js
1st - Check shell.js, at the top you should have a define function and it should say / do something like this, and should be exposing that to the view like so -
define(['durandal/plugins/router'], function (router) {
var shell = {
router: router
};
return shell;
};
2nd - Check and make sure the 'durandal/plugins/router' is point to the correct location in the solution explorer, in this case it is app > durandal > plugins > router. If it is not or if there is no router you can add it using nuget.
3rd - Make sure you aren't loading scripts up in your index or shell html pages. When using require.js you need to move any scripts you are loading into a require statement for everything to function properly. The 'Mismatched anonymous define() module' error usually occurs when you are loading them elsewhere - http://requirejs.org/docs/errors.html#mismatch