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

Code on GitHub


Steps

  1. Install Laravel according to the instructions on the Laravel website. Laravel 5.4 is used here.
         https://laravel.com/docs/5.4
         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, there's no errors.
  1. Go to the your Laravel project directory.
        E.g.
        cd ~/your-laravel-project
  1. Edit the package.json file of your Laravel project. Make sure you have the packages in red in the dependencies/devDependencies section. If you use a different vue version, you might need to adjust the version of the dependency packages.
"dependencies": {
    "babel-runtime": "^6.25.0",
    "quasar-extras": "0.x",
    "quasar-framework": "^0.14.1",
    "vue": "~2.3.4",
    "vue-router": "^2.7.0"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue-template-compiler": "~2.3.4",
    "vue-style-loader": "^3.0.1",
    "css-loader": "^0.28.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1"
  }
  1. Install the packages above.
npm install
  1. Chances are you will need to use vue-router. Create a resources/assets/js/router.js file with the content below. Customise the routes array attribute in the content to your need.
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
export default new VueRouter(
   {
       
/*
        * NOTE: VueRouter "history" mode DOESN'T works for Cordova builds,
        * it is only to be used only for websites.
        *
        * If you decide to go with "history" mode, please also open /config/index.js
        * and set "build.publicPath" to something other than an empty string.
        * Example: '/' instead of current ''
        *
        * If switching back to default "hash" mode, don't forget to set the
        * build publicPath back to '' so Cordova builds work again.
        */

       mode:
'history',
       routes: [
           {
               path:
'/example'
//                component: require('SomeComponent')
           },
           {
               path:
'*'
//                component: require('Error404')
           }
// Not found
       ]
   }
);
  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 about Laravel Mix).

Let's create a component called app by creating a resources/assets/js/components/App.vue file with the  content below. I use the template from QuasarPlay's layout example.

 <template>
   <q-layout
           ref=
"layout"
           :view=
"layoutStore.view"
           :left-breakpoint=
"layoutStore.leftBreakpoint"
           :right-breakpoint=
"layoutStore.rightBreakpoint"
           :reveal=
"layoutStore.reveal"
   >
       <q-toolbar slot=
"header">
           <q-btn flat @click=
"$refs.layout.toggleLeft()">
               <q-icon name=
"menu" />
           </q-btn>
           <q-toolbar-title>
               Quasar Layout
               <span slot=
"subtitle">Empowering your app</span>
           </q-toolbar-title>
           <q-btn class=
"within-iframe-hide" flat @click="$router.replace('/showcase')" style="margin-right: 15px">
               <q-icon name=
"keyboard_arrow_left" />
               Go back
           </q-btn>
           <q-btn flat @click=
"$refs.layout.toggleRight()">
               <q-icon name=
"menu" />
           </q-btn>
       </q-toolbar>

       <q-tabs slot=
"navigation" v-if="!layoutStore.hideTabs">
           <q-route-tab slot=
"title" icon="play_circle_outline" to="/showcase/layout/play-with-layout" replace label="Play with Layout" />
           <q-route-tab slot=
"title" icon="view_array" to="/showcase/layout/drawer-panels" replace label="Drawer Panels" />
           <q-route-tab slot=
"title" icon="pin_drop" to="/showcase/layout/fixed-positioning" replace label="Fixed Positioning" />
           <q-route-tab slot=
"title" icon="play_for_work" to="/showcase/layout/floating-action-button" replace label="Floating Action Button" />
       </q-tabs>

       <q-scroll-area slot=
"left" style="width: 100%; height: 100%">
           <q-list-header>Left Panel</q-list-header>
           <q-side-link item to=
"/showcase/layout/play-with-layout">
               <q-item-side icon=
"account circle" />
               <q-item-main label=
"Play with Layout" sublabel="Learn more about it" />
               <q-item-side right icon=
"thumb_up" />
           </q-side-link>
           <q-side-link item to=
"/showcase/layout/drawer-panels">
               <q-item-side icon=
"view_array" />
               <q-item-main label=
"Drawer Panels" sublabel="Layout left/right sides" />
           </q-side-link>
           <q-side-link item to=
"/showcase/layout/fixed-positioning">
               <q-item-side icon=
"pin_drop" />
               <q-item-main label=
"Fixed Positioning" sublabel="...on a Layout" />
           </q-side-link>
           <q-side-link item to=
"/showcase/layout/floating-action-button">
               <q-item-side icon=
"play_for_work" />
               <q-item-main label=
"Floating Action Button" sublabel="For Page actions" />
           </q-side-link>

           <div v-if=
"layoutStore.leftScroll" style="padding: 25px 16px 16px;">
               <p class=
"caption" v-for="n in 50">
                   <em>Left Panel has intended scroll</em>
               </p>
           </div>
       </q-scroll-area>

       <q-scroll-area slot=
"right" style="width: 100%; height: 100%">
           <q-list-header>Right Panel</q-list-header>
           <div v-if=
"layoutStore.rightScroll" style="padding: 25px 16px 16px;">
               <p class=
"caption" v-for="n in 50">
                   <em>Right Panel has intended scroll</em>
               </p>
           </div>
       </q-scroll-area>

       <router-view />

       <q-toolbar slot=
"footer">
           <q-toolbar-title>
               Footer
           </q-toolbar-title>
       </q-toolbar>
   </q-layout>
</template>

<script>


   import {
//        dom,
//        event,
//        openURL,
       QLayout,
       QToolbar,
       QToolbarTitle,
       QBtn,
       QIcon,
       QTabs,
       QTab,
       QAlert,
       QRouteTab,
       QList,
       QListHeader,
       QSideLink,
       QItemSide,
       QItemMain,
       QScrollArea
   } from
'quasar-framework'

   export default {
       name:
'app',
       components: {
           QLayout,
           QToolbar,
           QToolbarTitle,
           QBtn,
           QIcon,
           QTabs,
           QTab,
           QAlert,
           QRouteTab,
           QList,
           QListHeader,
           QSideLink,
           QItemSide,
           QItemMain,
           QScrollArea
       },
       
data()  {
           return {
               layoutStore: {
                   view:
'lHh Lpr lFf',
                   reveal:
false,
                   leftScroll:
true,
                   rightScroll:
true,
                   leftBreakpoint: 996,
                   rightBreakpoint: 1200,
                   hideTabs:
false
               }
           }
       },
       computed: {},
       methods: {},
       
mounted () {

       },
       
beforeDestroy () {
       }
   }
</script>

<style lang=
"stylus">

</style>
  1. Change the content of resources/assets/js/app.js as below.
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/

//require('./bootstrap');

window.Vue = require(
'vue');

require(
'quasar-framework/dist/quasar.mat.css');
require(
'quasar-extras/roboto-font');
import Quasar from 'quasar-framework';import router from './router';

Vue.use(Quasar);

Vue.component(
'app', require('./components/App.vue'));
const app = new Vue(
   {
       el:
'#app',
       
router
   }
);
  1. We can use our new app component created above in the welcome page 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-08-27 at 7.20.48 PM.png
  1. Done. Now you can start develop your own Vue components with Quasar in the Laravel framework.

Comments

  1. Hello. I just want to ask about what do you think is better, separating the quasar's folder from laravel or putting quasar with laravel in a project?

    ReplyDelete
  2. Thanks very much. Is it possible to run the quasar components directly in the blade.

    For example, on welcome.blade.php, just use: ?

    ReplyDelete
    Replies
    1. looks like it was stripped out.
      Just use q-toolbar directly in the blade file.

      Delete
    2. Hello David, can I see a snippet of your code about using quasar components on blade files?

      Delete
  3. Instructions work but not with the latest Quasar version (15).

    ReplyDelete
  4. Thanks so much for this tutorial

    ReplyDelete
  5. Can you do one on how to use it in version 0.16

    ReplyDelete
  6. Hey April!

    Any plans for Quasar v0.16 ? I'm looking also to integrate it with Laravel Spark.

    Quasar got huge changes at 0.15 version (and 0.16 recently), which brings a lot more.

    Thanks anyway :)

    ReplyDelete
  7. I have an additional question please.

    What about native build feature (using Electron, Cordova, etc...) that Quasar provide?
    Is it possible to use, even integrated with Laravel that way?

    Thanks again.

    ReplyDelete
  8. I tried but material icons cant show?

    ReplyDelete
  9. Hi all,
    Sorry I have been super busy and have not been maintaining this blog. I will update it with Quasar 0.16 soon.
    Regards,
    April

    ReplyDelete

Post a Comment

Popular posts from this blog

How To Set Up Quasar v0.13 On A Laravel(5.4)+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