Support touring with Vue.js 3.

package.json

@@ -115,6 +115,7 @@
     "zip": "node ./src-script/7zip-bin-wrapper.js"
   },
   "dependencies": {
+    "@globalhive/vuejs-tour": "^1.3.4",
     "@quasar/extras": "^1.15.6",
     "@types/yargs": "^15.0.5",
     "axios": "^0.26.1",
@@ -150,7 +151,6 @@
     "uuid": "^8.3.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue-tour": "^2.0.0",
     "vuex": "^4.1.0",
     "ws": "^8.5.0",
     "xml2js": "^0.4.23",

quasar.conf.js

@@ -18,7 +18,7 @@ module.exports = configure(function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/cli-documentation/boot-files
-    boot: ['axios', 'globalapi', 'ws'],
+    boot: ['axios', 'globalapi', 'tour', 'ws'],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: ['app.sass'],

src/App.vue

@@ -26,14 +26,14 @@ limitations under the License.
     >
       <q-icon name="warning" style="font-size: 2.5em; color: red" />
     </q-btn>
-    <!-- <VueTour /> -->
+    <zcl-tour />
   </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 import { QSpinnerGears } from 'quasar'
-// import VueTour from './tutorials/VueTour.vue'
+import ZclTour from './tutorials/ZclTour.vue'
 import CommonMixin from './util/common-mixin'
 const rendApi = require(`../src-shared/rend-api.js`)
 const restApi = require(`../src-shared/rest-api.js`)
@@ -85,7 +85,7 @@ async function initLoad(store) {
 export default defineComponent({
   name: 'App',
   components: {
-    // VueTour,
+    ZclTour,
   },
   mixins: [CommonMixin],
   computed: {

src/boot/tour.ts

@@ -0,0 +1,14 @@
+import { boot } from 'quasar/wrappers'
+import VueJsTour from '@globalhive/vuejs-tour'
+import '@globalhive/vuejs-tour/dist/style.css'
+import '../css/zclTour.scss'
+
+export let startTour = () => {}
+
+export const setStartTour = (startTourFunction) => {
+  startTour = startTourFunction
+}
+
+export default boot(async ({ app }) => {
+  app.use(VueJsTour)
+})

src/components/InitialContent.vue

@@ -15,7 +15,7 @@ limitations under the License.
 -->
 
 <template>
-  <div>
+  <div class="q-px-lg">
     <div v-if="uiTheme === 'matter'">
       <h3 id="zcl-advanced-platform">Welcome to Matter</h3>
     </div>