Re: Google fonts with cordova for Android

I did:

$quasar-dont-import-roboto = true
$quasar-dont-import-fonts = true

in app.variables.styl

and then I did:

$quasar-dont-import-fonts = true
$quasar-dont-import-roboto = true
@import '~quasar-framework/dist/quasar.mat.styl'

in app.mat.styl

/dist still contains /fonts/Roboto* though.

EDIT: Oh, I see I kinda missed the main.js tip…
I am not familiar with Stylus so I thought this is loaded by default. Thanks for the tip!
Even though I try to read up on everything it’s a hit and miss sometimes

Hi Scott,

I won’t store them there of course, I was using .env for other projects and I just wanted to have some consistency.

Thanks for the article, that really helps with the extendWebpack approach!
Dan

So guys, how good do you think is the env object in quasar.conf.js for storing secrets for example?
For Node I’m using dotenv, but it’s no use here because of webpack, plus the dotenv-webpack plugin is also useless in such setup because of the define plugin.

Should I resort to environment variables from the machine and pass them in env?
Or use extendWebpack option in quasar.conf.js maybe?

Thanks a lot! I saw the injections but it didn’t really occur to me.
I’ll definitely try that. I’m glad if it can be done without modifications to the quasar core.

Update: That did the trick. Thank you so much! BTW I used the plugin system.

I think I made it work:
Set stash: true in quasar.conf.js

stash: true,
// app plugins (/src/plugins),
plugins: ['i18n', 'axios'],
...

Then in cli entry.js

<% if (stash) { %>
import stash from 'src/stash'
<% } %>

...
const app = {
  el: '#q-app',
  router,
<% if (store) { %>store,<% } %>
<% if (stash) { %>data: { store: stash },<% } %>
  ...App
}

Your stash file has to look something like this:

import Vue from 'vue';
import VueStash from 'vue-stash';

Vue.use(VueStash);

const store = {
  user: {
    name: 'cody'
};

export default store;

You can also load vue-stash like a plugin with the new tooling (like axios, i18n…), but you still need to export the store(stash) file.

Hi guys,

I’ve been very happy using the vue-stash alternative to Vuex.
Problem is I had to manually edit the entry.js file to accomodate for its usage since it requires the store to be defined in the data object of the first Vue instance ( new Vue(app) ) to be injected in all components.
Here’s what I did to make it work:

<% if (store) { %>data: {store},<% } %>

Instead of:

<% if (store) { %>store,<% } %>

However I did this only for the SPA template. And if I ever update the cli it will be reset so it’s not really persistant.
I tried to put a different identifier there, for example stash, but I don’t know where does it come from.
I’d love to do a PR to support vue-stash if I understand the inner workings better.
I saw references to plugins, animations - all quasar.conf.js properties, so I fiddled with it and the cli files, but no success.

Hi folks, I have a question that’s bugging me.
Since the 0.15 release everything revolves around the cli.
For example the template files in the cli’s templates folder and namely the entry.js.
But I noticed that in the lib folder and quasar-config.js file the process.env gets overwritten as such:

    cfg.build.env = {
      'process.env': cfg.build.env
    }

webpack-config.js reads:

      new webpack.DefinePlugin(cfg.build.env),

The result is very quasar-tailored env.

APP_URL:"http://localhost:8080/"
DEV:true
MODE:"spa"
NODE_ENV:"development"
PROD:false
THEME:"mat"
VUE_ROUTER_BASE:"/"
VUE_ROUTER_MODE:"history"

I tried fiddling with it, but I messed it up. I’m missing some knowledge on the subject, I know.
Is there any way to access the real node environment variables since webpack config is now out of the question?
Thanks in advance!

Re: Google fonts with cordova for Android

I did:

$quasar-dont-import-roboto = true
$quasar-dont-import-fonts = true

in app.variables.styl

and then I did:

$quasar-dont-import-fonts = true
$quasar-dont-import-roboto = true
@import '~quasar-framework/dist/quasar.mat.styl'

in app.mat.styl

/dist still contains /fonts/Roboto* though.

EDIT: Oh, I see I kinda missed the main.js tip…
I am not familiar with Stylus so I thought this is loaded by default. Thanks for the tip!
Even though I try to read up on everything it’s a hit and miss sometimes

And a dirty hack proved to work: I placed my .woff2 font in /statics and defined it in index.html <style> block

@font-face {
	font-family: 'Comfortaa';
	font-style: normal;
	font-weight: 400;
	src: url('statics/Comfortaa.woff2') format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

html,
body {
	font-family: 'Comfortaa';
	overflow: auto;
}

Hi guys, I tried literally anything to use a custom font for Android build, but I can’t get it to work.

I followed this guide: http://therockncoder.blogspot.bg/2014/02/using-google-fonts-in-phonegap-app.html
Downloaded the .woff/.woff2 fonts, defined them but when building with Cordova Quasar still imports Roboto.
Combined it with http://quasar-framework.org/guide/app-using-fonts-from-cdn.html with no success.

I even tried to do some tricks with quasar.mat.styl, because Quasar imports from npm roboto-font-face still no luck.

Any ideas?