Vue applet example

If you want to develop applets with Vue you can follow this example. This tutorial explains how to set up Vue and create the first applet.

Prerequisites

• Node.js 8.16.0 or Node.js 10.16.0 or a later version on your local development machine

You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

Creating an App

You use the Vue CLI to create projects, generate application and library code.

npm

npm install -g @vue/cli
# OR 
yarn global add @vue/cli

Creating project

To create a new workspace and initial starter app:

vue create example-app

CLI will provide you in creating process.

You can select Vue version and basic dependencies in project from default templates or you can manually select features for your project.

In the next step you can choose if you want to use npm or yarn.

It will create a directory called example-app inside the current folder.
Inside directory, it will generate the initial Vue project structure and install the transitive dependencies.

Or use create-vue to scaffold Vite-based projects.

Add signageOS

For creating and running your applet you must add signageOS dependencies to the project:

• @signageos/front-display
• @signageos/front-applet is a JS API library

You can add these dependencies in package.json manually, or you can add it and install with npm.

Use npm

npm i @signageos/front-display@latest
npm i @signageos/front-applet@latest

After this, you can see changes in the package.json.

  "dependencies": {

    "@signageos/front-applet": "^5.10.1",

    "@signageos/front-display": "^12.1.0",

    "vue": "^3.2.47"

  },

Modify main.js

In this part you import sos from @signageos/front-applet and create code that checks if sos is running, after sos is fully loaded Vue will render components.

import { createApp } from 'vue'

import App from './App.vue'

import './assets/main.css'

import sos from '@signageos/front-applet'

sos.onReady().then(() => {

  console.log('Ready to rock')

  createApp(App).mount('#app')

})

Modify App.vue

This changes applet background to white, and it will look the same as if you run this with npm run serve . The applet default background changes it to another color without your setting.

    <style>
+         html {
+          background-color: white;
+          }
            #app {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
            background: white;
            }
    </style>

Modify package.json

Now we will modify package.json. This modification will help when we try to test our applet.

  "vue": {

    "publicPath": "./"

  },

  "main": "dist/index.html",

  "files": [

    "dist"

  ],

Edit vite.config.js

  base: "./",

  server: {

    watch: {

      usePolling: true 

    },

  },

Testing the applet on emulator

Install latest sOs CLI

npm install @signageos/cli@latest

Run these commands in separate terminals

npm run watch

sos applet start

The browser will update the changes after reloaded. 

Please note that this command is only relevant to applets not created via CLI.

Building project

For creating an applet you need to build your project. After the build command, npmgenerate a dist folder with index.html.

npm run build

Once built you have a complete React JS project for creating your Applet and you can upload and test it on a physical device following this guide

FAQ

If your application is not loading and only displaying an empty blank white page, you might want to check your vue-router configuration. It is possible that you are using VueJS history mode. The history option when creating the router instance allows us to choose among different history modes. More information about what history mode is and how to configure it can be found in the official VueJS documentation HERE