How To Set Up Quasar v0.13 On A Laravel(5.4)+Vue Framework



  1. 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 When I go to on a browser, I don't see any error.

  1. Go to the your Laravel project directory.
        cd ~/your-laravel-project

  1. 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"

  1. Install the packages above.
npm install

  1. 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 for more info). Let's create a component called app by creating a resources/assets/js/components/App.vue file with the content below


        <!-- Header -->
        <div slot=
    "header" class="toolbar">

        <!-- opens left-side drawer using its ref -->
        <button class=
    "hide-on-drawer-visible" @click="$">
        <q-toolbar-title :padding=

        <!-- opens right-side drawer using its ref -->
        <button class=
    "hide-on-drawer-visible" @click="$">

      <!-- Navigation Tabs -->
      <!-- <q-tabs slot=
        <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=
        <div class=
            Drawer Title

       <div class=
    "list no-border platform-delimiter">
        <!-- <q-drawer-link icon="mail" :to="{path: '/', exact: true}"> -->
        <!-- <q-drawer-link icon=
    "mail" :to="{}">
               </q-drawer-link> -->


    <!-- IF USING subRoutes only: -->
    <!-- <router-view class=
    "layout-view"></router-view> -->
    <!-- OR ELSE, IF NOT USING subRoutes: -->

    <div class=

    <!-- Right-side Drawer -->
    <q-drawer ref=
    <!-- Footer -->
    <div slot=
    "footer" class="toolbar">


    export default {

    function() {
      return {


    mounted() {
    'Component mounted.')

    1. In resources/assets/js/app.js, specify Quasar and the App component usage as below.
    window.Vue = require('vue');


    import Quasar from 'quasar-framework';


    'app', require('./components/App.vue'));

    const app = new Vue({

    1. 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') }}">
      <meta charset=
      <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(
      '', 'Laravel') }}</title>

      <!-- Fonts -->
      <link href=
      ',400,500,700|Material+Icons' rel="stylesheet" type="text/css">

      window.Laravel = {!! json_encode([
      'csrfToken' => csrf_token(),
      ]) !!};


      <div id=

      <script src=
      "{{ asset('js/app.js') }}"></script>

      1. 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.

      Screen Shot 2017-04-17 at 5.16.29 PM.png

      1. Done. Now you can develop your own Vue components with Quasar in the Laravel framework.


      1. Thanks so much for this - saved me a bunch of time.

      2. Thank 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!

      3. hello, have you seen the new update of quasar? I try this on v. 0.14.1 but the components doesn't appear.

      4. Hi, 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.

      5. Hi !

        I 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

        1. Try adding window.Vue = require('vue'); to the top of the resources/assets/js/app.js file.

        2. Also, I added a new guide for Quasar v0.14. Cheers!

      6. Hello. I followed your instructions and I got this error.

        ERROR 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?

        1. 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.

        2. Where is the link for your guide for v0.14?

      7. Very useful. Thank you.


      Post a Comment

      Popular posts from this blog

      How To Set Up Quasar v0.14 On A Laravel+Vue Framework

      How To Fix Random Disappearing Of HTML Elements On iPhone/iPad