migrate to vue3

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+    overrides: [
+        {
+            files: ['examples/*.vue', 'examples/*.js'],
+            rules: {
+                'vue/multi-word-component-names': 0,
+            },
+        },
+    ],
+    parser: "vue-eslint-parser",
+    parserOptions: {
+        parser: "@babel/eslint-parser",
+        ecmaVersion: 6,
+        sourceType: "module",
+        ecmaFeatures: {
+            modules: true
+        }
+    },
+}

README.md

@@ -1,51 +1,53 @@
-## 👋 You might want to use [Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) instead!
+## Froked from [fuxingloh/vue-horizontal-list](https://github.com/DaQinShgy/vue3-horizontal-list-list), migrate to vue3, thank you again [fuxingloh](https://github.com/fuxingloh).
 
-[Vue Horizontal](https://github.com/fuxingloh/vue-horizontal)
+## 👋 You might want to use [Vue Horizontal](https://github.com/DaQinShgy/vue3-horizontal-list) instead!
+
+[Vue Horizontal](https://github.com/DaQinShgy/vue3-horizontal-list)
 is another take on the horizontal layout written by me with an ultra simple implementation that is extensible and moves the
 responsibility to the user rather than the library.
 With zero dependencies, 3 KB for CDN users it's built for your production needs.
 
-[Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) is a rewrite of this library with many more focus such as
+[Vue Horizontal](https://github.com/DaQinShgy/vue3-horizontal-list) is a rewrite of this library with many more focus such as
 end-to-end testing on real browsers, SSG/SSR CI testing to make sure all code is SSG/SSR compliant for your SEO!
 Documentation are also extensible with everything you can think of about horizontal layout documentation through and through.
 
-[Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) also contains a snippet dossier with many SPA/SSR/SSG
+[Vue Horizontal](https://github.com/DaQinShgy/vue3-horizontal-list) also contains a snippet dossier with many SPA/SSR/SSG
 friendly recipes for your design needs.
 [Vue Horizontal](https://vue-horizontal.fuxing.dev/) is not just a library, **it's a place for everything horizontal.**
 
 ## Vue Horizontal List
 
 A pure vue native horizontal list implementation for mobile/touch and responsive web.
-Check it out here: [fuxingloh.github.io/vue-horizontal-list](https://fuxingloh.github.io/vue-horizontal-list/).
+Check it out here: [vue3-horizontal-list](https://github.com/DaQinShgy/vue3-horizontal-list/).
 
 > I created this because I like how AirBnb does their horizontal list, I couldn't find a library that is simple and close to it.
 
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![License MIT](https://img.shields.io/github/license/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/blob/master/LICENSE)
-[![Latest Release](https://img.shields.io/github/v/release/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/releases)
-[![Contributors](https://img.shields.io/github/contributors-anon/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/graphs/contributors)
-[![Issues](https://img.shields.io/github/issues/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/issues)
-[![GitHub Pages](https://github.com/fuxingloh/vue-horizontal-list/workflows/GitHub%20Pages/badge.svg)](https://fuxingloh.github.io/vue-horizontal-list/)
-[![CI](https://github.com/fuxingloh/vue-horizontal-list/workflows/CI/badge.svg)](https://github.com/fuxingloh/vue-horizontal-list/actions?query=workflow%3ACI)
+[![License MIT](https://img.shields.io/github/license/fuxingloh/vue-horizontal-list)](https://github.com/DaQinShgy/vue3-horizontal-list-list/blob/master/LICENSE)
+[![Latest Release](https://img.shields.io/github/v/release/fuxingloh/vue-horizontal-list)](https://github.com/DaQinShgy/vue3-horizontal-list-list/releases)
+[![Contributors](https://img.shields.io/github/contributors-anon/fuxingloh/vue-horizontal-list)](https://github.com/DaQinShgy/vue3-horizontal-list-list/graphs/contributors)
+[![Issues](https://img.shields.io/github/issues/fuxingloh/vue-horizontal-list)](https://github.com/DaQinShgy/vue3-horizontal-list-list/issues)
+[![GitHub Pages](https://github.com/DaQinShgy/vue3-horizontal-list-list/workflows/GitHub%20Pages/badge.svg)](https://fuxingloh.github.io/vue-horizontal-list/)
+[![CI](https://github.com/DaQinShgy/vue3-horizontal-list-list/workflows/CI/badge.svg)](https://github.com/DaQinShgy/vue3-horizontal-list-list/actions?query=workflow%3ACI)
 
 ---
 
-[![vue-horizontal-list screenshot](demo.png)](https://nuxt-app.now.sh/vue-horizontal-list)
+[![vue3-horizontal-list screenshot](demo.png)](https://nuxt-app.now.sh/vue-horizontal-list)
 
 ## Installation
 
 ```shell script
-npm i vue-horizontal-list
+npm i vue3-horizontal-list
 # or
-yarn add vue-horizontal-list
+yarn add vue3-horizontal-list
 ```
 
-Check out this [alternative project](https://github.com/fuxingloh/vue-horizontal) maintained by me for a new take on horizontal layout in vue.
+Check out this [alternative project](https://github.com/DaQinShgy/vue3-horizontal-list) maintained by me for a new take on horizontal layout in vue.
 
 #### Basic usage
 
 ```vue
-<vue-horizontal-list
+<vue3-horizontal-list
   :items="items"
   :options="{
     responsive: [
@@ -61,7 +63,9 @@ Check out this [alternative project](https://github.com/fuxingloh/vue-horizontal
       <p>{{item.content}}</p>
     </div>
   </template>
-</vue-horizontal-list>
+</vue3-horizontal-list>
+
+import vue3HorizontalList from "vue3-horizontal-list";
 ```
 
 ## Features
@@ -81,8 +85,8 @@ Check out this [alternative project](https://github.com/fuxingloh/vue-horizontal
 - Slot different content at the beginning, or the ending of the items list by [@Draccano](https://github.com/Draccano).
 - Minimal config setup
 - Tested on chrome, edge and safari
-- [Demo](https://fuxingloh.github.io/vue-horizontal-list/)
-- [Examples](https://github.com/fuxingloh/vue-horizontal-list/tree/master/examples)
+- [Demo](https://github.com/DaQinShgy/vue3-horizontal-list/)
+- [Examples](https://github.com/DaQinShgy/vue3-horizontal-list/tree/master/examples)
 
 ## All available options
 
@@ -139,7 +143,7 @@ const options = {
 <template>
   <div id="app">
     <section>
-      <vue-horizontal-list :items="items" :options="options">
+      <vue3-horizontal-list :items="items" :options="options">
         <template v-slot:nav-prev>
           <div>👈</div>
         </template>
@@ -162,19 +166,19 @@ const options = {
             <p>{{ item.content }}</p>
           </div>
         </template>
-      </vue-horizontal-list>
+      </vue3-horizontal-list>
     </section>
   </div>
 </template>
 
 <script>
 import Vue from "vue";
-import VueHorizontalList from "@/vue-horizontal-list.vue";
+import vue3HorizontalList from "@/vue3-horizontal-list.vue";
 
 export default Vue.extend({
   name: "ServeDev",
   components: {
-    VueHorizontalList,
+    vue3HorizontalList,
   },
   data() {
     return {
@@ -235,9 +239,9 @@ body {
 
 ```shell script
 yarn # to setup
-yarn run examples:serve # to dev and test
+yarn serve # to dev and test
 ```
 
 ## Contributions
 
-For any question or feature request please feel free to create an [issue](https://github.com/fuxingloh/vue-horizontal-list/issues/new) or [pull request](https://github.com/fuxingloh/vue-horizontal-list/pulls).
+For any question or feature request please feel free to create an [issue](https://github.com/DaQinShgy/vue3-horizontal-list-list/issues/new) or [pull request](https://github.com/DaQinShgy/vue3-horizontal-list-list/pulls).

babel.config.js

@@ -1,5 +1,5 @@
-const devPresets = ["@vue/babel-preset-app"];
-const buildPresets = ["@babel/preset-env"];
 module.exports = {
-  presets: process.env.NODE_ENV === "development" ? devPresets : buildPresets,
-};
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

examples/auto-play.vue

@@ -6,33 +6,40 @@
       <a href="https://github.com/Draccano" target="_blank">@Draccano</a>
     </p>
 
-    <vue-horizontal-list :items="items" :options="options">
+    <vue3-horizontal-list :items="items" :options="options">
       <template v-slot:default="{ item }">
         <div class="item">
           <h3>{{ item.title }}</h3>
           <p>{{ item.content }}</p>
         </div>
       </template>
-    </vue-horizontal-list>
+    </vue3-horizontal-list>
   </div>
 </template>
 
 <script>
-import VueHorizontalList from "@/vue-horizontal-list.vue";
+import vue3HorizontalList from "@/vue3-horizontal-list.vue";
+import { ref, reactive } from "vue";
 
 export default {
   name: "auto-play",
   components: {
-    VueHorizontalList,
+    vue3HorizontalList,
   },
-  data() {
-    return {
-      items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
+  setup() {
+    const items = ref(
+      [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
         return { title: `Auto play ${i}`, content: `Auto play, 3000ms.` };
-      }),
-      options: {
-        autoplay: { play: true, repeat: true, speed: 3000 },
-      },
+      })
+    );
+
+    const options = reactive({
+      autoplay: { play: true, repeat: true, speed: 3000 },
+    });
+
+    return {
+      items,
+      options,
     };
   },
 };