Posts made by Martin

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.

Never mind. I’ve built my own i18n.

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

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

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>

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?

My left drawer <q-drawer> always seems to stay a little stuck when closing again. This is mostly noticeable
when I’m opening a list that needs some time loading. The drawer will slide away but stay stuck slightly (like 40px width) until the list is fully loaded after which it finally disappears.
Does anyone recognise this behaviour?

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

@alexs
I started experimenting with Quasar in sept 2016, and it’s been fun building stuff with it.
Never had any major problems, code quality and documentation are outstanding, and the developer is very responsive/approachable.
I’m currently doing internal alpha tests with my app in AppStore and PlayStore. Won’t be long before going beta.
Here’s a link to give you an idea.
Design is not polished/final. There is lot’s of freedom to customise. Either for both ios and android, or for each platform specifically.
https://www.youtube.com/watch?v=u0UYSFLV6As&t=18s

Like this?
http://forum.quasar-framework.org/topic/227/horizontal-thumbnail-slider-with-selected-image-on-top

Basic example. Copy Paste code into an empty Example.vue file

  <q-layout>
    <!--BODY-->
    <div class="layout-view">
      <!--IMAGE-->
      <div>
        <img :src="itemSelected.url" width="100%">
      </div>
      <!--HORIZONTAL LIST-->
      <div>
        <div class="scrollmenu">
          <div v-for="item in list"
               class="thumbnail"
               @click="itemSelected = item">
            <img :src="item.url" width="150px">
          </div>
        </div>
      </div>
    </div>
  </q-layout>
</template>

<script>
  export default {
    data () {
      return {
        list         : [],
        itemSelected : {}
      }
    },
    mounted() {
      for (let i = 1; i <= 20; i++) {
        this.list.push(
          {
            name : 'item ' + i,
            url  : 'http://placehold.it/350x150?text=PLACEHOLDER' + i
          }
        )
      }
      this.itemSelected = this.list[0]
    }
  }
</script>

<style>
  div.scrollmenu {
    overflow    : auto;
    white-space : nowrap;
  }

  div.scrollmenu .thumbnail {
    display : inline-block;
    margin  : 5px;
  }
</style>

@hata Here’s some more clarification
http://quasar-framework.org/guide/app-handling-static-assets.html

@rstoenescu @Jon
Will handling dynamic paths with :src work in the assets folder?
<img :src="'/assets/' + account.avatar" />

I know it does work in the statics folder
<img :src="'/statics/' + account.avatar" />

@Jon I was hoping so! It always surprises me why there’s never such a “mental picture” shown, when reading articles about vuex, redux etc…
Describing it in words makes it way too complicated.

@hata I don’t think that’s possible right now, but maybe a nice feature request.
You can also create your own horizontal scrollbar like this:

https://jsfiddle.net/maartenfb/ak1wxLLk/

html

<div class="scrollmenu"> 
<!-- use a v-for here -->
   <div class="thumbnail">hello</div>
   <div class="thumbnail">hello</div>
   <div class="thumbnail">hello</div>
   <div class="thumbnail">hello</div>
</div>

css

 div.scrollmenu {
    background-color : #333;
    overflow         : auto;
    white-space      : nowrap;
  }

  div.scrollmenu .thumbnail {
    display         : inline-block;
    color           : white;
    padding         : 10px;
    width           : 200px;
  }

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'

3. 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;
  }

1. create a styled re-usable Loader.js with the quasar Loading component…
   more info: http://quasar-framework.org/components/loading.html

import {Loading} from 'quasar-framework'
const Loader = {
  show : () => {
    Loading.show(
      {
        delay        : 300,
        message      : 'Loading...',
        messageColor : '#C86F51',
        spinner      : 'tail',
        spinnerSize  : 60, // in pixels
        spinnerColor : '#C86F51'
      }
    )
  },
  hide : () => {
    Loading.hide()
  }
}
export default Loader

2. import Loader.js into your Vue component, and attach the methods…

<script>
  import Loader from '../common/Loader.js'
... 
 export default {
    methods : {
      hideLoader () {
        Loader.hide()
      },
      showLoader() {
        Loader.show()
      },
...

3. add “show” to the Component’s “created()” function…

...
created() {
      this.showLoader()
    },
...

4. add “hide” to the template’s img tag load event.
   more info about html events here :
   http://www.quackit.com/html_5/tags/html_5_event_handler_content_attributes.cfm

<template>
...
<div>
      <img
        @load="hideLoader()"
        class="responsive"
        :src="user.avatar"/>
    </div>
...

That’s about it.
I will do a quasar request for a preload spinner, specifically inside img tags.
Saves us some boiler code

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

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

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.

And it’s VERY cool how vue-dev-tools in Chrome keeps track of all the states that vuex goes through.

I LOVE the Material calendar widget.
BTW: The first time I used it, I was also scrolling through the months to get to another year
Also, the clock time widget is a brilliant invention!

Ok I’ve set up a rep for you. What email address can I send the link to?

At first I thought it was related to my cordova security settings, but that’s fixed.
Now I’m only getting this error
"TypeError: Cannot read property ‘removeChild’ of null
at VueComponent.beforeDestroy "
The same error also appears with PopOvers.
Searching on Google gave me this link (a vue-material issue with md-tooltips)
with similar error.
https://github.com/marcosmoura/vue-material/issues/188