First adaptation to Vue 3.

.eslintrc.js

@@ -6,19 +6,16 @@ module.exports = {
     node: true
   },
   extends: [
-    "plugin:vue/essential",
-    "eslint:recommended"
+    'plugin:vue/vue3-essential',
+    '@vue/standard'
   ],
   parserOptions: {
-    parser: "babel-eslint"
+    ecmaVersion: 2020
   },
   // add your custom rules here
   rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   },
-  overrides: [{
-    "files": ["*.vue"],
-    "rules": {
-      // 'no-console': "off",
-    }
-  }]
+  overrides: []
 }

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,67 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ master ]
+  schedule:
+    - cron: '35 2 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

changelog.md

@@ -0,0 +1,35 @@
+# Changelog Vue 3
+
+
+
+Files: 
+
+/index.js => New (maybe incomplete) way to use a plugin in Vue 3. I only tested it on localhost.
+
+/.eslintrc.js => Switching to Vue 3 (and using standard eslint because it was more comfortable for me personally). 
+
+```json
+extends: [
+    'plugin:vue/vue3-essential',
+    '@vue/standard'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+```
+
+/src/components
+
+service.js and line.js=> minor changes. Removal of `var` and change to `const` or `let` as appropriate, removal of unused variables in jsdoc and change of == to === (type checking in addition to the value).
+
+*.vue => structurally there are no changes. Only the format has been changed from Vue 2 to Vue 3 respecting everything that existed before.
+
+
+
+/demo/
+
+main.js and App.vue=> change to Vue 3.
+
+
+
+In package.json several dependencies were changed but I still have to adjust some things. If I can I will review this weekend the tests.

demo/App.vue

@@ -6,7 +6,7 @@
 
     <div class="setting">
 
-      <el-form ref="form" :model="form" label-width="100px" @validate="fresh">
+      <el-form ref="formulary" :model="form" label-width="100px" @validate="fresh">
         <el-row>
           <el-col :span="12">
             <el-form-item label="x">
@@ -67,15 +67,16 @@
        </el-form-item>
 
       </el-form>
+      <div>{{form}}</div>
     </div>
     <div class="msg"> You selected :{{msg}}</div>
     <el-tabs v-model="tab" type="card">
       <el-tab-pane label="Pipeline" name="pipeline">
-        <vue-pipeline ref="pipeline" :x="parseInt(form.x)" :y="parseInt(form.y)" :data="data" :showArrow="form.showArrow"
-          :ystep="parseInt(form.ystep)" :xstep="parseInt(form.xstep)" :lineStyle="form.lineStyle" @select="handleSelect" />
+        <vue-pipeline ref="pipeline" :x="form.x" :y="form.y" :data="dataLocale" :showArrow="form.showArrow"
+          :ystep="form.ystep" :xstep="form.xstep" :lineStyle="form.lineStyle" @select="handleSelect" />
       </el-tab-pane>
       <el-tab-pane label="Data" name="data">
-        {{JSON.stringify(this.data)}}
+        {{dataLocale}}
       </el-tab-pane>
 
     </el-tabs>
@@ -88,70 +89,77 @@
 
 <script>
 // import hue from "./hue.vue";
-import { hue1, hue3, sample, sample3, sample2,bug } from "./data.js";
-
+import { hue1, hue3, sample, sample3, sample2, bug } from './data.js'
+import { ref, reactive, onMounted } from 'vue'
 export default {
-  name: "app",
-  components: {
-    // hue
-  },
-  data() {
-    return {
-      tab: "pipeline",
-      data: hue1.nodes,
-      form: {
-        x:50,
-        y: 55,
-        xstep: 120,
-        ystep: 70,
-        data: 0,
-        showArrow: true,
-        lineStyle: "default",
-        from: 0,
-        to: 0
-      },
-      msg: ""
-    };
-  },
-  watch: {},
-  methods: {
-    fresh() {
-      switch (this.form.data) {
+  name: 'app',
+  setup () {
+    const tab = ref('pipeline')
+    const pipeline = ref('')
+    const dataLocale = ref([])
+    dataLocale.value = hue1.nodes
+    const msg = ref('')
+    const formulary = ref('')
+    const form = ref(reactive({
+      x: 50,
+      y: 55,
+      xstep: 120,
+      ystep: 70,
+      data: 0,
+      showArrow: true,
+      lineStyle: 'default',
+      from: 0,
+      to: 0
+    }))
+    const fresh = () => {
+      switch (form.value.data) {
         case 0:
-          this.data = bug;
-          break;
+          dataLocale.value = bug
+          break
         case 1:
-          this.data = hue3.nodes;
-          break;
+          dataLocale.value = hue3.nodes
+          break
         case 2:
-          this.data = sample.nodes;
-          break;
+          dataLocale.value = sample.nodes
+          break
         case 3:
-          this.data = sample3.nodes;
-          break;
+          dataLocale.value = sample3.nodes
+          break
         case 4:
-          this.data = sample2.nodes;
-          break;
+          dataLocale.value = sample2.nodes
+          break
       }
-       this.$refs["pipeline"].render();
-    },
-    addLine() {
-      let list = this.data[this.form.from].next || [];
-      if (list.some(it => it.index == this.form.to)) {
-        alert("this line is exist");
+      pipeline.value.render()
+    }
+    const addLine = () => {
+      const list = dataLocale.value[form.value.from].next || []
+      if (list.some(it => it.index === form.value.to)) {
+        alert('this line is exist')
       }
-      list.push({ index: this.form.to });
-      this.data[this.form.from].next = list;
-      this.$refs["pipeline"].render();
-    },
-    handleSelect(node) {
-      this.msg = `{ ${node.name} }`;
+      list.push({ index: form.value.to })
+      dataLocale.value[form.value.from].next = list
+      pipeline.value.render()
+    }
+    const handleSelect = (node) => {
+      msg.value = `{ ${node.name} }`
+    }
+    onMounted(() => {
+      dataLocale.value = hue1.nodes
+      console.log(dataLocale)
+    })
+    return {
+      tab,
+      dataLocale,
+      form,
+      msg,
+      pipeline,
+      formulary,
+      fresh,
+      addLine,
+      handleSelect
     }
-  },
-  mounted() {
-    this.data = hue1.nodes;
   }
-};
+}
 </script>
 
 <style>