VueJS »

Notes for VueJS Programming

Tips, hints, and tricks for developers in programming VueJS.

Last update: 2022-08-19

Table of Content

Mutiple Languages#

The popular package is vue-i18n. From version 9.x, it supports Vue3 and composition SFC files.

1. Install

npm install vue-i18n --save-dev

2. Translation files

en.json

{
    "hello": "Hello!",
    "name": "My name is {0}"
}

vi.json

{
    "hello": "Xin chào!",
    "name": "Tên tôi là {0}"
}

3. Attach vue-i18n to Vue App

main.ts

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import en from '../assets/locales/en.json'
import kr from '../assets/locales/vi.json'
import App from './App.vue'

const i18n = createI18n({
  allowComposition: true,
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: en,
    vi: vi
  }
});

const app = createApp(App);
app.use(i18n);
app.mount('#app');

4. Use in Components

In the <script>, need to import useI18n:

<script setup lang="ts">
    import { useI18n } from 'vue-i18n';
    const { t, locale } = useI18n();
    const textHello = t("hello") + t("name", ["Vue"]);
    const isEnglish = computed(() => locale == 'en');
</script>

In <template>, vue-i18n can be accessed via global instances:

<template>
    <div>{{ $t("hello") }} {{ $t("name", ["Vue"]) }}</div>
    <select class="switch" v-model="$i18n.locale">
      <option value="en">{{ $t("english") }}</option>
      <option value="vi">{{ $t("vietnamese") }}</option>
    </select>
</template>

Auto Updater#

Use the electron-updater package of Electron Builder instead of the autoUpdater feature of Electron:

The differences are:

`electron-updater`	`autoUpdater`
Support all platforms: Windows, Linux, MacOS	Only support Windows and MacOS
Only MacOS needs code-signed builds	Require code-signed builds
Release files are already generated and can be served by any HTTP server, GitHub repo, or any file hosting	Use a public GitHub releases or a public HTTP Feed

1. Install as a direct dependency:

npm install electron-updater --save

2. Create new process for Auto Updater in main.ts

import { app, BrowserWindow, dialog } from 'electron';
import { autoUpdater } from 'electron-updater'
import { join } from 'path';

function createWindow() {
  const mainWindow = new BrowserWindow();
  autoUpdater.on('update-downloaded', (info) => {
    const dialogOpts = {
      type: 'info',
      buttons: ['Yes', 'No'],
      title: 'Updater',
      message: 'New update available',
      detail: 'Do you want to install the latest version?'
    }

    dialog.showMessageBox(mainWindow, dialogOpts).then((response) => {
      // update in silent mode, and run again
      if (response.response == 0) autoUpdater.quitAndInstall(true, true);
    })
  });

  setInterval(
    function () {
      autoUpdater.checkForUpdates();
    },
    60000
  );
}

3. Upload files for updates

The below files are already generated when electron build the installation files:

latest.yml: contaon filename, version
<project>.exe: the installation file
<project>.exe.blockmap: the crc of blocks, used in partial download

A simple Python script to host file server with CORS enabled:

from http.server import HTTPServer, SimpleHTTPRequestHandler


class CORSRequestHandler(SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header('Access-Control-Allow-Origin', '*')
        self.send_header('Access-Control-Allow-Methods', 'GET')
        self.send_header('Cache-Control', 'no-store, no-cache, must-revalidate')
        return super(CORSRequestHandler, self).end_headers()


httpd = HTTPServer(('localhost', 8000), CORSRequestHandler)
httpd.serve_forever()

Notes for VueJS Programming

Table of Content

Mutiple Languages#

Auto Updater#

Comments