How to use Vue to create Applet

Have more questions? Submit a request

Vue applet example

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

Prerequisites

  • Node.js 8.16.0 or Node.js 10.16.0 or 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 manualy select features for your project.

applet-vue-example-cli.png

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

applet-vue-example.png

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

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": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "vue-template-compiler": "^2.6.11",
+      "@signageos/front-display": "7.7.0",
+      "@signageos/front-applet": "4.4.0"
    },

Modify main.js

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

    import Vue from 'vue'
    import App from './App.vue'
+  import sos from '@signageos/front-applet'


    Vue.config.productionTip = false

+   sos.onReady().then(() => {
+   console.log("Ready to rock")
+   new Vue({
+       render: h => h(App),
+   }).$mount('#app')
+   })

Modify App.vue

This change applet background to white, and it will look same as if you run this with npm run serve . The apples default background change 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 test our applet.

"vue": {
   "publicPath": "./"
}

Building project

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

npm run build

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

Was this article helpful?
0 out of 0 found this helpful
Share