Использование библиотеки туров по продукту с VueJS

Question

Я пытаюсь настроить руководство по вводу функций для моего веб-приложения (например, intro.js). У меня проблемы с intro.js, когда ничего не происходит (нет сообщений об ошибках или сообщений о турах). Я пытался настроить атрибуты данных, которые использует intro.js, и вызывать начало тура из смонтированной функции в App.vue, но безуспешно. Я смотрю, есть ли у кого-нибудь опыт работы с такими библиотеками в сочетании с VueJS.

Код из App.vue:

mounted: function() {
  const introJS = require('intro.js')
  introJS.introJs().start()
}

Внутри того же компонента в нем <template>:

<div class="card card-accent-info" v-if="!isLoading" data-intro="Test step here" data-step="1">

У меня также есть загруженный CSS в App.vue:

@import "~intro.js/minified/introjs.min.css";

Answer 1

Проблема может заключаться в том, как вы импортируете CSS из <style> тег. Чтобы правильно применить стили, импортируйте CSS в JavaScript:

<!-- MyComponent.vue -->
<script>
import "intro.js/minified/introjs.min.css";

export default {
  mounted() {
    const introJS = require("intro.js");
    introJS.introJs().start();
  }
};
</script>

демонстрация