Tag: vue

Pacharapol Withayasakpunt Pacharapol Withayasakpunt
Wed 20 May 2020

This can easily be done with Slots and Component :is.

<template lang="pug">
#App
  component(v-if="layout" :is="layout")
    router-view
  router-view(v-else)
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  get layout () {
    const layout = this.$route.meta.layout
    return layout ? `${layout}-layout` : null
  }
}
</script>

And it fallbacks to Blank Layout.

Pacharapol Withayasakpunt Pacharapol Withayasakpunt
Sat 4 January 2020

What is Pug

Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

Pug uses whitespace syntax, and is Tab / Space -sensitive, just like Markdown and Python

Pug is mainly a template engine for Node.js, and cannot be installed for Webpack via NPM/Yarn, however there is https://github.com/pugjs/pug#browser-support but it is a very large file. However, I created HyperPug a while ago, and it is relatively small.

Pacharapol Withayasakpunt Pacharapol Withayasakpunt
Thu 8 August 2019
Cordova, TypeScript, Vue and using features beyond WebView

An easy way to set a layout for mobile apps, easier than Flutter, React Native or NativeScript, for instance, is to use Apache Cordova or PhoneGap. This is probably due to CSS/SCSS/HTML (rather than partial CSS support in NativeScript).

Why Vue? Because Vue's Vuetify's Material design looks just like Android! While being easier to set the layout than NativeScript Vue.

An example app I have used all the above-mentioned in the header is

patarapolw/nltkpass-app

patarapolw/nltkpass-app

Mobile application for NLTKPass. Contribute to patarapolw/nltkpass-app development by creating an account on GitHub.