Can I use Quasar fully with custom css and components?



  • I am interested in Quasar to build a web app and mobile app from one codebase… but do the build tools that allow this only work when using Quasar’s components and css?

    I have my own unique stylesheet for my web app, and prefer to use my own component for notification bars etc. Can I use my own CSS and code for icons, drawers etc and still compile a mobile app, desktop app etc?



  • Hi and Welcome to Quasar.

    Yes, you can use your own CSS and (Vue) components. You’ll just have to rework some of Quasar’s to match, if that is your intention.

    Scott


  • Admin

    Just to add to this, Quasar components all use BEM style CSS syntax so it’s really easy to update the styles (it might take a component or two to get your head around it).

    I’ve just written my own component set for a project I’m working on and it’s been a breeze.



  • I have an existing site which needs to be rewritten into Node.js using Vue.js and Quasar. I want to start by importing my CSS stylesheet and HTML markup (which includes things like modals) to see the skeleton of the site and then start programming it in JS. If I am not using Quasar’s own CSS and components, is there still any benefit to using Quasar over say Express and Vue?



  • Not really, if all you are doing is building a website and especially if the website isn’t very interactive, you probably don’t even need Vue either. Vue’s power is for creating SPAs. Quasar extends that power to build multiple types of apps. But, to do that, you need to be building your app completely in Quasar. You can still use your design, but you should integrate it into the scaffold of a Quasar project. Then you are much farther to building something that is cross-device-ready.

    Scott



  • @s-molinari What if, in the future, Quasar is replaced by something else? It sounds like your app will be so dependent on it that it would be hard to change if you used Quasar’s own components and CSS. I want to avoid the Bootstrap look where everyone sites basically looks the same.



  • If you are fearful of framework lock-in, again, you shouldn’t even be using Vue. It’s a framework too, you know? 😁 If you develop constantly thinking “what if”, all you are doing is slowing yourself down. It’s called analysis paralysis.

    Just get stuff done. And use tools that help you to get to your goals faster (like Quasar). That is what is important.

    Scott


Log in to reply