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

Update:


Steps:  

  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 http://domain.app. When I go to http://domain.app on a browser, I don't see any error.

  1. Go to the your Laravel project directory.
        E.g.
        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 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>

    1. 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'
    });

    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') }}">
      <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>

      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.

      Comments

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

        ReplyDelete
      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!

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

        ReplyDelete
      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.
        Greetings.

        ReplyDelete
      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

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

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

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

        ReplyDelete
        Replies
        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.

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

          Delete

      Post a Comment

      Popular posts from this blog

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

      How To Set Up NodeJs And Npm On Linux

      How To Set Up PHP on Ubuntu

      How To Set Up A Vue Web App Development Environment

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

      How To Set Up WordPress On Google App Engine (GAE)

      What Is Markdown ?

      How To Set Up The Nginx Web Server On Ubuntu