Install over another framework or solution
-
Not sure if this is the place to ask for this, feel free to move the topic around.
I’m working on a Laravel 5.4 application, which has some parts that could use the SPA principle. I already use Vue on some pages, for small components, and Laravel makes it really easy to work with Vue.
I would like to use Quasar for one part of that application. But as I understand it, Quasar has been thought as a full blown application in and out of itself, right?
Is there anyway to easily install it on top of another framework? I’m fully aware that parts of it obviously won’t work (Cordova) is it is dependent on a classic PHP framework, but still, there are so many great things in Quasar that using it that way makes sense.
Maybe I’m missing something, I don’t know. I know that the “right” way of doing things would be a Laravel API BackEnd, and then multiple clients Apps, but that’s not my point here.
Another different example setup : using a full CMS solution like let’s say Craft CMS, developing the frontend with the Quasar framework would make a lot of sense, but again, how would I install Quasar in such a setup?
I guess it “could” be done, manually, but there’s not a simple npm install to get started is there?
Any comments would be much appreciated.
-
Quasar is a framework for building SPAs. It isn’t an application in and of itself, but rather a good couple of steps above Vue, built for the purpose of rapid application development. It sort of goes the steps you would have to take to get Vue to where you’d need it for a full blown SPA, by integrating things like vue-router, a CSS framework (ie Stylus) and building up a large set of standardized components, among many other things.
Currently Quasar is built only to be used by itself. So, if you want to build a front or backend UI, you can only use Quasar on its own. If you are using Laravel with Quasar, then Laravel can only serve as a REST API.
I hope that makes sense.
Scott
-
Yes it makes sense. That’s what I thought. Quasar has to be used on its own.
There is no way to use it as a component (+ grid + css) framework to “enrich” an existing application.
It think it would make sense to be able to use part of it as a Bootstrap or Foundation replacement, dedicated to Vue development…I do think it is possible with something like Vuetify, I didn’t test it yet, but from what I read I think it is possible.
Thank you for making it clear.
Jean-Luc -
I’m in the same boat as Jean-Luc. I have an existing laravel system, and I’m trying to use quasar to build a new “app” on top of that system.
Running the quasar build is great, it all works very well. I guess the only thing I would need to make it work is the ability to define where the build assets go.
I got it to work (mostly, still some bugs) by hacking the quasar build scripts. It’s a horrible solution because now I cannot update the framework.If there were a way to define where to push index.html and the build bundle in a variable, and have it work both under “dev” and “build”, that would be awesome. From what I can tell, the build scripts didn’t make this easy.
However, I’m a webpack newb, and I’m trying to reverse engineer this, probably making it more complex then it needs to be.
-
Some other possible ideas I’ve though of, is running two bundelers. The quasar cli for it’s build, then creating a laravel elixir (now mix) rule that watched the output of the quasar build, that then in series pulled the build into the laravel build.
complex and ugly hack, but might work?
-
My other idea is to just treat it as a “stand alone” application, running on it’s own server and hitting the laravel application as the backend API. This is less then ideal, will require another URL, and ripple all kinds of issues during staging and deployment. Also I’d have to figure out how to handle auth.
Golly solution 1 (add destination variables) sure would be the easiest solution (from my perspective, I’m not a maintainer of quasar though
)My hacks work fairly well. Maybe there is a way to make a new build target? (like instead of “quasar dev met”, I could make “quasar linux-dev met” and “linux-build”). This would be an attempt to keep framework updates from clobbering my build modifications.
-
@LinHiNun Hi, the build scripts are there to be tweaked as necessary by developers in their own apps. Updating Quasar doesn’t mean you need to do a “quasar init” again (99% of the times). So feel free to change whatever is necessary in
/build. -
@s.molinari
I’ve managed to use Quasar components over Laravel 5.4. I documented the steps here.
http://blog.aprilpnguyen.com/2017/04/how-to-set-up-quasar-on-laravel-vue-framework.htmlNote that Laravel Mix will automatically compile all assets from the resources folder to the public folder in the Laravel framework when you do npm run <arg>. You don’t have to do much configuration.
-
@april - Well done!
You could also present your article in the “Show and Tell” forum as its own thread, if you’d like.
Scott
-
@april nice. tweeted about it on Quasar’s account.
-
Thanks @s-molinari , @rstoenescu ! I posted the topic on “Show and Tell”.
-
@april hi i followed your steps in create but i did not get the right output…it only displays plain buttons and texts to my display. Is there something else to do to get the right output same as yours? please help me thank you
-
I’m want to work with Laravel backend too.
Is there a way to put all functionality into Laravel and work both with Laravel mix and Quasar-cli commands? -
@Sogl - Sorry. No. This isn’t possible currently.
Scott
-
@jeimz173
I tried the steps again and was able to see all styling. Perhaps you could check if your npm is up to date and other settings are correct. You could also use Chrome Developer Tool to see if there’s any error behind the scene. -
Hi, I can say that april’s method works for me, but with this new versión, I found different errors:
If I try global like “import Quasar from ‘quasar-framework’;” and just use the components, these doesn’t appear, I get don’t registered error.
If I import components one by one, within every .vue, these are loaded, but I get a new error: can’t get “some property” (eg. theme) of undefined, I am thinking that is because “$q” isn’t define, and I must to be too newbie to know how to declare. -
@jeimz173 I had this problem too, and I can not solve it. Did you solve it?
-
@willagner yeah by just manually importing the css from dist folder… see the code below
import 'quasar-framework/dist/quasar.mat.css'; import Quasar from 'quasar-framework'; -
I created another guide for Quasar v0.14. Hope it helps!
http://blog.aprilpnguyen.com/2017/08/how-to-set-up-quasar-v014-on-laravelvue.html
-
hi @april just got read your article and its cool!
like you
