How To Set Up Quasar v0.13 On A Laravel(5.4)+Vue Framework
Update:
Steps:
- Install Laravel according to the instructions on the Laravel website.
Make sure you have a Laravel site running before continuing.
E.g. I use Homestead and configure a site under the url http://domain.app. When I go to http://domain.app on a browser, I don't see any error.
- Go to the your Laravel project directory.
E.g.
cd ~/your-laravel-project
- Edit the package.json file of your Laravel project. Add the following packages in the dependencies section.
"dependencies": {
... "material-design-icons": "^3.0.1", "roboto-fontface": "^0.7.0", "fastclick": "^1.0.6", "moment": "^2.15.0", "quasar-framework": "^0.13.4" } |
- Install the packages above.
| npm install |
- Now we can create our custom Vue components with Quasar components. In the Laravel framework, Vue components need to be placed in the resources/assets/js/components folder. Laravel Mix will then compile these assets to the public folder automatically when you run the command npm run <arg> (see https://laravel.com/docs/5.4/mix for more info). Let's create a component called app by creating a resources/assets/js/components/App.vue file with the content below
<template>
<div> <q-layout> <!-- Header --> <div slot="header" class="toolbar"> <!-- opens left-side drawer using its ref --> <button class="hide-on-drawer-visible" @click="$refs.leftDrawer.open()"> <i>menu</i> </button> <q-toolbar-title :padding="1"> Title </q-toolbar-title> <!-- opens right-side drawer using its ref --> <button class="hide-on-drawer-visible" @click="$refs.rightDrawer.open()"> <i>menu</i> </button> </div> <!-- Navigation Tabs --> <!-- <q-tabs slot="navigation"> <q-tab icon="mail" route="/layout" exact replace>Mails</q-tab> <q-tab icon="alarm" route="/layout/alarm" exact replace>Alarms</q-tab> <q-tab icon="help" route="/layout/help" exact replace>Help</q-tab> </q-tabs> --> <!-- Left-side Drawer --> <q-drawer ref="leftDrawer"> <div class="toolbar"> <q-toolbar-title> Drawer Title </q-toolbar-title> </div> <div class="list no-border platform-delimiter"> <!-- <q-drawer-link icon="mail" :to="{path: '/', exact: true}"> --> <!-- <q-drawer-link icon="mail" :to="{}"> Link </q-drawer-link> --> </div> </q-drawer> <!-- IF USING subRoutes only: --> <!-- <router-view class="layout-view"></router-view> --> <!-- OR ELSE, IF NOT USING subRoutes: --> <div class="layout-view"></div> <!-- Right-side Drawer --> <q-drawer ref="rightDrawer"> ... </q-drawer> <!-- Footer --> <div slot="footer" class="toolbar"> .... </div> </q-layout> </div> </template> <script> export default { data: function() { return { }; }, mounted() { console.log('Component mounted.') } } </script> |
- In resources/assets/js/app.js, specify Quasar and the App component usage as below.
| window.Vue = require('vue'); require('quasar-framework/dist/quasar.mat.css'); import Quasar from 'quasar-framework'; Vue.use(Quasar); Vue.component('app', require('./components/App.vue')); const app = new Vue({ el: '#app' }); |
- We can use our new component created above (App.vue) in a blade template. Let's use the app component in the welcome blade by clearing the content of the resources/views/welcome.blade.php file and pasting in the following lines. Notice the <app> tag.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Fonts --> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"> <script> window.Laravel = {!! json_encode([ 'csrfToken' => csrf_token(), ]) !!}; </script> </head> <body> <div id="app"> <app></app> </div> <script src="{{ asset('js/app.js') }}"></script> </body> </html> |
- Run npm run dev or npm run watch. Then view your Laravel app in a browser to see the content of the Vue component you’ve just created with the help of Quasar.
- Done. Now you can develop your own Vue components with Quasar in the Laravel framework.
Thanks so much for this - saved me a bunch of time.
ReplyDeleteThanks!!
ReplyDeleteThank you for this article! Worked just as you described. I used Laravel 5.4 and the same dependencies versions as in this article. Helped me a lot!
ReplyDeletesuper!
ReplyDeletehello, have you seen the new update of quasar? I try this on v. 0.14.1 but the components doesn't appear.
ReplyDeleteHi, I use this and works for me, but, have you see the new version of quasar? I try this method but with v. 0.14.1 the components doesn't appear, components don't registered.
ReplyDeleteGreetings.
Hi !
ReplyDeleteI did everything, and I get this message:
app.js:96 Uncaught ReferenceError: Vue is not defined
at Object. (app.js:96)
at __webpack_require__ (app.js:20)
at Object.defineProperty.value (app.js:70)
at __webpack_require__ (app.js:20)
at app.js:63
at app.js:66
Try adding window.Vue = require('vue'); to the top of the resources/assets/js/app.js file.
DeleteAlso, I added a new guide for Quasar v0.14. Cheers!
DeleteHello. I followed your instructions and I got this error.
ReplyDeleteERROR in ./~/quasar-framework/dist/quasar.mat.css
Module parse failed: c:\Users\user\Documents\SCHOOL\OJT\verbumdei-social\node_modules\quasar-framework\dist\quasar.mat.css Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
| * Released under the MIT License.
| */
| *,
| *:before,
| *:after {
@ ./resources/assets/js/app.js 3:0-47
What do you think is missing or wrong in it? Do I need to install a css loader?
Please follow my new guide for the lastest version of Quasar (v 0.14). I have my code up on Github for your reference with the new guide.
DeleteWhere is the link for your guide for v0.14?
DeleteVery useful. Thank you.
ReplyDelete