Vue 3 Support (#99)

* feat: add support for vue 3

* docs: add vue 3 and composition API usage

* feat: add vue 3 support

Drop vue 2 support

* fix: yarn.lock file

* feat: add support for vue 3

* docs: add vue 3 and composition API usage

* feat: add vue 3 support

Drop vue 2 support

* Format some things

* Update dist

* Update cypress config

Co-authored-by: Federico Mameli <[email protected]>
Co-authored-by: Robert Wagner <[email protected]>

Author: 3 people

.eslintrc

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "node": true
+  },
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "babel-eslint",
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended"
+  ],
+  "rules": {
+    "vue/multi-word-component-names": "off"
+  },
+  "root": true
+}

README.md

@@ -13,63 +13,95 @@
 
 This is a Vue wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd), site tour, library.
 
-## Installation
-
-### NPM
-
 ```bash
 npm install vue-shepherd --save
 ```
 
-When using with a module system, you must explicitly install vue-shepherd via Vue.use():
+## Usage
 
-```js
-import Vue from 'vue';
-import VueShepherd from 'vue-shepherd';
+### Composition API (suggested)
 
-Vue.use(VueShepherd);
-```
+```vue
+<template>
+  <div ref="el">
+    Testing
+  </div>
+</template>
 
-## Usage
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import { useShepherd } from 'vue-shepherd'
+
+  const el = ref(null);
 
-You will need to import the styles first:
+  const tour = useShepherd({
+    useModalOverlay: true
+  });
+  
+  onMounted(() =>  {
+    tour.addStep({
+      attachTo: { element: el.value, on: 'top' },
+      text: 'Test'
+    });
 
-```css
-@import '~shepherd.js/dist/css/shepherd.css';
+    tour.start();
+  });
+</script>
 ```
 
-The plugin extends Vue with a set of directives and $shepherd() constructor function.
+### Option API
 
-### Constructor Function
+To use vue-shepherd with Option API you have to install the plugin which will add the '$shepherd' function to your vue app.
+
+```js
+import { createApp } from 'vue';
+import VueShepherdPlugin from 'vue-shepherd';
+import '~shepherd.js/dist/css/shepherd.css';
+
+createApp().use(VueShepherdPlugin).mount('#app');
+```
 
 ```vue
 <template>
-  <div>
+  <div ref="el">
     Testing
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'ShepherdExample',
-    mounted() {
-      this.$nextTick(() => {
-        const tour = this.$shepherd({
+  import { defineComponent } from 'vue'
+
+  export default defineComponent({
+    data(){
+      return {
+        tour: null
+      }
+    },
+
+    methods: {
+      createTour(){
+        this.tour = this.$shepherd({
           useModalOverlay: true
         });
 
-        tour.addStep({
-          attachTo: { element: this.$el, on: 'top' },
+        this.tour.addStep({
+          attachTo: { element: this.$refs.el, on: 'top' },
           text: 'Test'
         });
+      }
+    },
+
+    created(){
+      this.createTour();
+    },
 
-        tour.start();
-      });
+    mounted(){
+      this.tour.start();
     }
-  };
+  });
 </script>
 ```
 
-### Directives
+## Directives
 
 WIP

cypress.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  fixturesFolder: 'tests/e2e/fixtures',
+  screenshotsFolder: 'tests/e2e/screenshots',
+  videosFolder: 'tests/e2e/videos',
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./tests/e2e/plugins/index.js')(on, config)
+    },
+    specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'tests/e2e/support/index.js',
+  },
+})

cypress.json

@@ -1,3 +1,70 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useShepherd } from '@/entry.js';
+
+const installElement = ref(null);
+const usageElement = ref(null);
+
+const tour = useShepherd({
+  useModalOverlay: true,
+});
+
+const createTourSteps = () => {
+  tour.addSteps([
+    {
+      attachTo: {
+        element: installElement.value,
+        on: 'top',
+      },
+      buttons: [
+        {
+          action: function () {
+            return this.cancel();
+          },
+          secondary: true,
+          text: 'Exit',
+        },
+        {
+          action: function () {
+            return this.next();
+          },
+          text: 'Next',
+        },
+      ],
+      text: 'Install test',
+    },
+    {
+      attachTo: {
+        element: usageElement.value,
+        on: 'top',
+      },
+      buttons: [
+        {
+          action: function () {
+            return this.back();
+          },
+          secondary: true,
+          text: 'Back',
+        },
+        {
+          action: function () {
+            return this.next();
+          },
+          text: 'Next',
+        },
+      ],
+      text: 'Usage test',
+    },
+  ]);
+
+  return tour;
+};
+
+onMounted(() => {
+  createTourSteps().start();
+});
+</script>
+
 <template>
   <div class="page">
     <div class="container">
@@ -9,11 +76,15 @@
 
       <h5>Installation</h5>
 
-      <div class="install-element">Install instructions go here</div>
+      <div class="install-element" ref="installElement">
+        Install instructions go here
+      </div>
 
       <h5>Usage</h5>
 
-      <div class="usage-element">Usage instructions go here</div>
+      <div class="usage-element" ref="usageElement">
+        Usage instructions go here
+      </div>
 
       <div class="medium-8 columns medium-centered text-center">
         <a
@@ -273,65 +344,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'ShepherdExample',
-  mounted() {
-    this.$nextTick(() => {
-      const tour = this.$shepherd({
-        useModalOverlay: true,
-      });
-
-      tour.addSteps([
-        {
-          attachTo: {
-            element: this.$el.querySelector('.install-element'),
-            on: 'top',
-          },
-          buttons: [
-            {
-              action: function () {
-                return this.cancel();
-              },
-              secondary: true,
-              text: 'Exit',
-            },
-            {
-              action: function () {
-                return this.next();
-              },
-              text: 'Next',
-            },
-          ],
-          text: 'Install test',
-        },
-        {
-          attachTo: {
-            element: this.$el.querySelector('.usage-element'),
-            on: 'top',
-          },
-          buttons: [
-            {
-              action: function () {
-                return this.back();
-              },
-              secondary: true,
-              text: 'Back',
-            },
-            {
-              action: function () {
-                return this.next();
-              },
-              text: 'Next',
-            },
-          ],
-          text: 'Usage test',
-        },
-      ]);
-
-      tour.start();
-    });
-  },
-};
-</script>

dev/components/ShepherdExample.vue

@@ -1,11 +1,5 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import Dev from './serve.vue';
 import plugin from '@/entry';
 
-Vue.use(plugin);
-
-Vue.config.productionTip = false;
-
-new Vue({
-  render: (h) => h(Dev),
-}).$mount('#app');
+createApp(Dev).use(plugin).mount('#app');

dev/serve.js

@@ -1,10 +1,14 @@
+<script setup>
+import ShepherdExample from './components/ShepherdExample.vue';
+</script>
+
 <template>
   <shepherd-example />
 </template>
 
-
 <style>
 @import '~shepherd.js/dist/css/shepherd.css';
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -14,10 +18,3 @@
   margin-top: 60px;
 }
 </style>
-<script>
-import ShepherdExample from './components/ShepherdExample.vue';
-
-export default {
-  components: { ShepherdExample },
-};
-</script>