No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Martin
    • Profile
    • Following 1
    • Followers 4
    • Topics 22
    • Posts 79
    • Best 28
    • Groups 0

    Martin

    @Martin

    54
    Reputation
    1001
    Profile views
    79
    Posts
    4
    Followers
    1
    Following
    Joined Last Online
    Location Amersfoort - Netherlands

    Martin Follow

    Best posts made by Martin

    • Add custom fonts to your app

      Here are the steps:

      1. put your fonts in a directory of choice eg: ./src/themes/my/cool/fonts/…
        0_1474990798781_upload-5515946f-18cd-425e-abb7-1da8c02839da

      2. declare your font in ./scr/themes/app.variables.styl. This is also the place where your can modify other parts of your theme. (or in app.ios.styl, app.mat.styl, if you have platform specific ideas)
        Also notice the stylus syntax! (more over here http://stylus-lang.com/)
        0_1474991033159_upload-c1d9ba95-a5be-4e7f-a83d-820879c9964c

      3. reference your font with css in a vue component <style>…</style>
        0_1474991138724_upload-48b67afa-97af-4e7e-8d67-f71abd29f2e2

      4. when doing “quasar dev”, webpack should list your font after bundling.
        0_1474991504055_upload-dfe65876-014b-4516-bb6c-8bfe9a4ee9bf

      5. that’s all 😉
        0_1474991410859_upload-97ad385d-8dd6-4cb5-92ee-1493e545c25a

      posted in Show & Tell
      Martin
      Martin
    • RE: Using layouts. How?

      Here’s an example how I am using quasar-layout

      I am using one root page which is my home page (index.vue).
      From this root page, I’m jumping into the main entities of my app using a left side bar.
      Here’s an example

      my router .js is set up like this:

      // HOME
      '/': {
          component: load('index')
        },
      // LIST VIEW
        '/skill/list': {
          component: load('skill/SkillList')
        },
      // DETAIL VIEW
        '/skill/detail': {
          component: load('skill/SkillDetail'),
          }
        }
      ...
      
      

      index.vue (home)

      <template>
      <quasar-layout>
        <!--HEADER -->
        <div slot="header"
            class="toolbar">
          <button class="left-drawer-opener">
            <i>menu</i>
          </button>
          <quasar-toolbar-title :padding="1">
            SkillDance
          </quasar-toolbar-title>
          <button>{{connected}}</button>
        </div>
        <!-- LEFT SIDE BAR (IMPORTED COMPONENT) -->
        <left-side-bar></left-side-bar>
      <!-- NEXT IS VERY IMPORTANT TO UNDERSTAND. 
      // I am using <div class="layout-view"> here. This means that when I jump to 'skill/list', 
      I am actually switching from one quasar layout to another. In your case, you would want to use
       <router-view class="layout-view"></router-view> here,  which will make the user stay on index.vue,
      and seeing 'skill/list' "embedded" in index.vue.  Of course depending on how you set up router.js
      -->
        <div class="layout-view">
            <h1>Home (index.vue) </h1>
            <p> and any content I'd like to show here without using router-view</p>
        </div>
      </quasar-layout>
      </template>
      

      LeftSideBar.vue (actually holds all the main navigation nodes )

      <template>
      <div>
        <quasar-drawer>
          <div class="toolbar">
            <sign-out-button></sign-out-button>
          </div>
          <div class="list platform-delimiter">
            <quasar-drawer-link v-link="{path: '/', exact: true}"
                class="title-color"
                icon="home">
              Home
            </quasar-drawer-link>
            <quasar-drawer-link v-link="{path: '/skill/list', exact: true}"
                class="title-color"
                icon="gps_fixed">
              Skills
            </quasar-drawer-link>
            <quasar-drawer-link v-link="{path: '/training/list', exact: true}"
                class="title-color"
                icon="linear_scale">
              Training Tracks
            </quasar-drawer-link>
            <quasar-drawer-link v-link="{path: '/user/account/profile', exact: true}"
                class="title-color"
                icon="account_circle">
              Account
            </quasar-drawer-link>
          </div>
        </quasar-drawer>
      </div>
      </template>
      

      SkillList.vue (separate quasar layout)
      As you can see I’m using exact the same page layout here as in index.vue (left drawer etc.)
      In this case, in index.vue, I might as well could have chosen to use…
      <router-view class=“layout-view”>
      instead of…
      <div class=“layout-view”>
      I guess as a rule of thumb you could use <router-view> as long as the main page layout stays the same
      in terms of components used (nav tabs, drawers, footer etc)
      If you need a different layout setup for a particular page, create a new <quasar-layout> for it and make your router.js
      jump to that page instead of showing it inside a <router-view>

      <template>
      <quasar-layout>
        <!--HEADER -->
        <div slot="header"
            class="toolbar">
          <button class="left-drawer-opener">
            <i>menu</i>
          </button>
          <quasar-toolbar-title>
            <div class="title">Skills</div>
          </quasar-toolbar-title>
        </div>
        <!-- LEFT SIDE DRAWER -->
        <left-side-bar></left-side-bar>
        <!--LAYOUT -->
        <div class="layout-view">
          <div class="list">
            <skill-card v-for="skill in skillList"
                :skill="skill"></skill-card>
          </div>
        </div>
      </quasar-layout>
      </template>
      

      index.vue resides in ./src/components/index.vue
      The rest of the file structure:
      0_1477932427047_upload-6ddeb082-27fd-4464-9f0d-77de6a69041e

      I haven’t tried v-if, but I see no reason why that wouldn’t work.
      If you want to build v-ifs around tabs , drawers, footers etc, I would try different quasar layouts instead, unless it’s something trivial you need to do.
      Hope this gets you on track.

      posted in Help
      Martin
      Martin
    • Add chartJS to Quasar

      npm install vue-chartjs

      1.Chart component (.js not .vue)

      0_1476777013409_img2361.jpg

      2.Parent component

      0_1476777003244_img2362.jpg

      3.Result

      0_1476777019880_img2360.jpg

      posted in Show & Tell
      Martin
      Martin
    • Quasar + Vuex

      I’ve been deep diving into Vuex and built a Quasar sample app based on this article.
      https://coligo.io/learn-vuex-by-building-notes-app/

      Link:
      git clone https://github.com/beebase/learn-vuex-by-building-notes-app.git

      0_1485356309797_upload-1f3243de-ae64-4d07-9e27-d20ce20eb3e1

      The code in the article is outdated so I’ve used latest syntax for
      Quasar 0.12
      Vuex ^2.1.1
      Vue ^ 2.1.10

      The solution demonstrates vuex basics with a todo list.
      Vuex is very cool. Once you know the pattern, it’s basically re using it over and over again.
      And it feels very organised. Here’s a sample of that pattern.
      0_1485356429433_upload-e33fe274-7ad9-4bf4-8d8f-71d9ae8c2211

      And it’s VERY cool how vue-dev-tools in Chrome keeps track of all the states that vuex goes through.
      0_1485357001911_upload-e287018b-77e9-4402-b7ed-3c01fa749a2b

      posted in Show & Tell
      Martin
      Martin
    • RE: WARNING in asset size limit

      @cherry314159 it’s indeed a “bug” that sneeked into one of latest webpack builds. I fixed it in the base file.

      As for “bigness”, quasar is not big yet in terms of nr of contributors, but it is in terms of completeness. On top of that, it’s high quality code/ low bugs. At least that’s been my experience for last 3 months. Also gitstars are rising rapidly.

      posted in CLI
      Martin
      Martin
    • RE: [ios] App does not open on Iphone 4s

      I just finished a build this evening that works on 4s, 5 and 6 with ios >= 9.1
      (only tested on iphone simulator)
      I’m using latest version of quasar with webpack 2.x

      As a test you could try and build a clean default quasar app and see if that starts up with an iphone 4s

      posted in Help
      Martin
      Martin
    • Add animate.css
      1. " npm install animate.css --save" in your project directory

      2. import in main.js

      import Vue from 'vue'
      import Quasar from 'quasar'
      import 'animate.css/animate.min.css'
      
      1. add <transition> to the element/component you want to animate
        more info here: https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes
      <div class="row">
                  <button @click="toggle = !toggle">
                    toggleIt
                  </button>
                  <transition
                    name="custom-classes-transition"
                    enter-active-class="animated bounceInLeft slow"
                    leave-active-class="animated bounceOutLeft slow">
                    <button v-if="toggle">ANIMATION</button>
                  </transition>
                </div>
      

      It’s basically just wrapping the vue <transition> tag around an element with attribute like v-if etc. (that can listen to vue transitions.)
      Then add the enter and leave classes.
      “animated”: a “signal” for animate.css to do something
      “bounceInLeft etc” : animate.css animations https://daneden.github.io/animate.css/

      You can control speed by adding your own class:

        .slow {
          -webkit-animation-duration : 1s;
        }
      
      posted in Show & Tell
      Martin
      Martin
    • RE: IDE for mobile app.

      Webstorm would be my choice.
      I’ve used Atom and Webstorm extensively and both work ok. (auto completion, coloring, plugins)
      Atom is free and works pretty well with VueJS/Quasar but I don’t like the code formatting. To get it in sync with eslint rules (which are also used in Quasar) is a real pain. I’ve tried quite some Atom plugins but it still doesn’t work as I want it to. In order to get rid of eslint errors/warnings, I had to start commenting out eslint rules.
      Webstorm is much better in that area.
      Never used SublimeText but I always read good reviews about it.
      Brackets is also a possibility but seems to loose traction compared to Atom. (both are open source)

      Since Quasar is all about hybrid apps (web browser, mobile browser) , I guess any IDE that supports HTML/CSS/JS will do.
      However, make sure it also has good code formatting that can follow eslint rules, or you’ll end up with this “custom added” mess…
      (or ditching eslint)

      0_1478288001515_upload-5b2c1fb0-7d02-4892-a599-b06deb304477

      btw: this is also a great source for anything VueJS related
      https://github.com/vuejs/awesome-vue

      posted in Framework
      Martin
      Martin
    • RE: Quasar + Vuex

      @LaurentPayot I’m also using Firebase as backend. It’s great, but I’m having trouble sometimes controlling all the firebase listeners. Especially when the data model becomes complex/relational, needing data from multiple nodes at the same time, Firebase listeners may start acting like a christmas tree.
      I’m not using vuefire or vuexfire, but I wonder if any best practices have evolved regarding listeners.
      If you know of any ‘must reads’ let me know please.
      All in all I find it though to get the right balance between normalising/denormalising data and keeping listeners under control.
      Maybe Firebase is just not fit for highly relational stuff.
      In an ideal world, I’d rather use a real time graph database like http://gun.js.org/.
      GunJS looks promising, but it’s not production ready yet.

      posted in Show & Tell
      Martin
      Martin
    • RE: Routes are not working on my android device

      There’s a nice debug tool in Chrome browser
      https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

      posted in Starter Kits
      Martin
      Martin

    Latest posts made by Martin

    • RE: Could you change the Layout header slot from a child component?

      @Martin said in Could you change the Layout header slot from a child component?:

      I understand this would be easy with titles, but what about buttons? Showing, hiding, attaching methods…? Does this mean you have to parameterise buttons per state/view?

      I posted a workaround for this here:
      http://forum.quasar-framework.org/topic/783/nested-q-layout-behavior-0-13-vs-0-14-again/2

      posted in Help
      Martin
      Martin
    • RE: Nested q-layout behavior 0.13 vs 0.14 (again)

      I’m using a ‘common’ headerBar.vue as a component that I import in each page.vue component separately.
      The advantage is that I can set up the common stuff in the headerbar and override it in a page.vue whenever needed.
      Also, gui design/placement remains consistent in all pages.
      Maybe this is a way out for you? I’m still on 0.13 but I suppose this will also work in 0.14

      HeaderBar.vue

      <template>
        <div class="toolbar">
          <!-- DEFAULT MENU BUTTON THAT OPENS LEFT DRAWER -->   
          <slot name="btn1left">
              <button class="hide-on-drawer-visible"
                      style="width:30px; padding:0;"
                      @click="openLeftSideBar()">
                <i>menu</i>
              </button>
          </slot>
          <!-- BUTTON 2 LEFT -->
          <slot name="btn2left"></slot>
           <!-- TITLE -->   
          <q-toolbar-title>
            <div class="toolbarTitle">
              <slot name="title"></slot>
            </div> 
           <div class="toolbarSubTitle">
              <slot name="subTitle"></slot>
            </div>
          </q-toolbar-title>
          <!-- BUTTON 5 RIGHT WITH A DEFAULT method-->
          <slot name="btn5right">
            <button-circular  size="small" icon="settings"
                             :onClick="openCollectionList"></button-circular>
          </slot>
          <slot name="btn4right"></slot>
          <slot name="btn3right"></slot>
          <slot name="btn2right"></slot>
          <!-- BUTTON 1 RIGHT WITH A DEFAULT login.vue button component-->     
          <slot name="btn1right">
            <login></login>
          </slot>
        </div>
      </template>
      

      Page.vue

      <template>
        <q-layout>
          <header-bar slot="header">
          <div slot="btn1left>
              <!-- OVERRIDE LEFT DRAWER BUTTON WITH SOMETHING ELSE -->
              <button @click="doSomethingElseHere()> myLocalButton</button>
           </div>
          <div slot="title"> {{t.skills}}</div>
          <div slot="subTitle">{{subTitle}}</div>
          <div slot="btn4right"></div>
            ...
      
      <script>
        import HeaderBar from '../common/HeaderBar.vue'
      ...
      
      export default {
          components : {
            HeaderBar,
            ...
      
      posted in Help
      Martin
      Martin
    • RE: I can't seem to get routes done correctly [solved]

      I have a splash screen mapped to ‘/’ so the app always open with splash.vue.
      However, in the splash component I use the created() method to conditionally redirect to another page.

      created () {
            if (....) {
              router.push(...)
            }
            else {
              router.push(...)
            }
        } 
      

      Maybe this approach works for you?

      posted in Help
      Martin
      Martin
    • RE: quasar dev build is getting very slow

      I just updated to webpack 3.5.1 build time is now 4 secs.
      Seems to work ok with quasar .13.4

      posted in Help
      Martin
      Martin
    • RE: Add custom fonts to your app

      This was caused by a typo, wasn’t it?

      posted in Show & Tell
      Martin
      Martin
    • RE: quasar dev build is getting very slow

      All my media files are in the statics dir.
      Meanwhile I discovered a nasty bug with firebase and webpack. Turns out that webpack is adding the entire firebase.js each time it sees a method call to this package. After ditching firebase my build is now ~ 10Mb.
      Nevertheless, my dev build still lasts for about 16 secs now. When I start off with a clean quasar build again , build time starts around 5 secs, but over time (weeks) it increases. Last week it suddenly went from 15 secs to 50 secs, after doing some regular coding. No module installs or anything else. Webpack is becoming very annoying. I can see on google that a lot of people are battling slow build times. I think I’ll lock my self up for a week and start learning webpack from the ground up again.

      posted in Help
      Martin
      Martin
    • quasar dev build is getting very slow

      Before I start digging into webpack, does anyone know what “the usual suspects” are when web pack builds are getting slow.
      My dev build is reaching 2 min by now!
      Thanks.
      0_1494849616363_upload-e9d5fde9-b1c7-4af3-b340-67a234ba9612

      posted in Help
      Martin
      Martin
    • RE: can't get vue-i18n initialised properly

      Never mind. I’ve built my own i18n.

      posted in Help
      Martin
      Martin
    • can't get vue-i18n initialised properly

      This should be pretty straight forward so I wonder what I’m missing here.
      I’ve set up vue-i18n in main.js like this:

      const messages = {
        en : {
          message : {
            hello : 'hello world'
          }
        },
        ja : {
          message : {
            hello : 'こんにちは、世界'
          }
        }
      }
      import VueI18n from 'vue-i18n'
      Vue.use(VueI18n)
      const i18n     = new VueI18n(
        {
          locale : 'ja', // set locale
          messages // set locale messages
        })
      Vue.use(Quasar) // Install Quasar Framework
      Quasar.start(
        () => {
          /* eslint-disable no-new */
          new Vue(
            {
              el     : '#q-app',
              i18n,
              router,
              render : h => h(require('./App'))
            }
          )
        }
      )
      

      component

      <template>
      ...
       <div>{{ $t('message.hello') }}</div>
      ...
      

      output
      0_1491247281917_upload-f4248e58-1b62-4635-967b-e091f6b9e422
      The package seems to work but it’s giving warnings that it can’t find the translations.

      vue-i18n] Cannot translate the value of keypath "message.hello". Use the value of keypath as default
      
      posted in Help
      Martin
      Martin
    • RE: Left drawer sometimes jerky on close, when loading list

      Fixed. I think this was caused by the drawer being embedded in a router-view. I removed the drawer (which is a component) and placed it inside the parent component.

      Main.vue

      <template>
        <div>
             <router-view class="layout-view"></router-view>
          <left-side-bar ref="leftSideBar"></left-side-bar>
        </div>
      </template>
      
      posted in Help
      Martin
      Martin