Posted on 2020-08-27T21:57:32Z by Kevin Foong

Quasar is a Vue framework that makes it easy to build hybrid mobile apps using Cordova. In this introduction I'll provide an overview on how to build a simple Android app. Note that the Quasar website already has quite good documentation on how to get started. Here I will outline my notes and any difficulties I encountered along the way during my own set up. Hopefully this tutorial will help someone get started in developing mobile apps.
I also assume that you already have some Vue knowledge.
Step 1 - Install Quasar CLI and create a project in the folder "myquasar"
npm install -g @quasar/cli
quasar create myquasar
Read more ...
Tags:
Vue
quasar
cordova
android
Posted on 2020-05-14T06:14:20Z by Kevin Foong
Here is how to do a game or animation loop in Vue using Javascript's "requestAnimationFrame" method.
So what is requestAnimationFrame?
requestAnimationFrame
is a method that is part of the very large Web API's under the Window Interface. See this page for more information - https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
This method provides a callback, typically to the function it is in, to create a recursive loop that can achieve up to 60 frames per second. I've created a very simple growing box animation in Vue to demonstrate.

Read more ...
Tags:
games
Vue
Javascript
Posted on 2020-05-12T09:06:49Z by Kevin Foong
In this blog post I will provide an overview of how to get Flask to serve a Vue Single Page Application (SPA). I assume you already have the prerequisites installed - namely node.js, Vue and Python.
Vue
1. Use Vue to create your project.
vue create myproject
2. In the Vue CLI select "Manually select features"
For a SPA make sure you choose Router. The rest is your preference.

Read more ...
Tags:
flask
Vue
API
Posted on 2020-05-10T12:50:46Z by Kevin Foong
Follow these steps to easily use VueJS on your existing (traditional) web page. This example below is based on a Flask website.
1. In your base template add a link to the Vue CDN. Make sure the Vue script tags are at the bottom of body
and not inside head
. This is because the div id="app"
needs to be loaded first before we initialise Vue.
The {% block scripts %}
tag is where your custom scripts will go later.
......
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Custom Javascript -->
{% block scripts %}
{% endblock %}
</body>
</html>
Read more ...
Tags:
flask
Vue