Quasar 2, typescript, vite error

[radoslavirha]

Hi,

I cannot use "@globalhive/vuejs-tour": "^1.3.4", in my Quasar 2 app.

boot file:

import '@globalhive/vuejs-tour/dist/style.css';

import VueJsTour from '@globalhive/vuejs-tour';
import { boot } from 'quasar/wrappers';

export default boot(({ app }) => {
  app.use(VueJsTour);
});

and App.vue

<template>
 <VTour
  name="test"
  :steps="[]"
 />
 <router-view />
</template>

Anybody can help me?

Thanks

[GlobalHive]

Hello, first of all the 'name="test"' is not used anywhere 2nd. You have to provide some steps before starting the tour, else it will throw an error.

I don't know if the other errors have to do with Quasar 2, but since its based on Vue there shouldn't be any problems. Please check the documentation on how to create a tour. HERE

[radoslavirha]

Hi, I just migrated from quasar 1 to 2 (vue too) so I had original vue-tour and it seems I have a everything prepared. I'll doublecheck. Thanks

[radoslavirha]

This is my App.vue:

<template>
    <div id="selectByID">Selected by its id 'selectByID'</div>
    <p class="selectByClass">Telected by its class 'selectByClass'</p>
    <button data-step="3">Selected by the 'data-step="3"' attribute</button>

    <VTour :steps="steps"/>
 <router-view />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    return {
      steps: ref([
        {
          target: '#selectByID',
          content: 'This is the first step'
        },
        {
          target: '.selectByClass',
          content: 'This is the second step, placed on the bottom of the target',
          placement: 'bottom'
        },
        {
          target: '[data-step="3"]',
          content: 'This is the third step'
        }
      ])
    };
  }
});
</script>

There is something wrong with VTour component. It does not render anything on screen, but when I comment VTour component everything renders fine. I don't have an issue with starting tour, but with rendering everything else on my page.

^^ is basically an example from docs. It does not work with <script script> neither.

[radoslavirha]

It's working it seems.

https://stackoverflow.com/questions/72036673/typeerror-cannot-read-properties-of-null-reading-isce-custom-component-li

At least my console is clear for now :D, I'll try to start tour,...

[GlobalHive]

@Radik24 it would be <script setup> using the composite api but that shouldn't be a problem. Well this one here is not based on the "old" vue-tour, its a complete rewrite. If it still doesn't work, tell me then ill create a quasar project to check it

[GlobalHive]

No more replies, #closed