Skip to content

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

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

3. Attach vue-i18n to Vue App

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);

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');

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

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

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);

    function () {

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)