before urpgrade to vue 3

assets/js/components/pages/edit.vue

@@ -0,0 +1,62 @@
+<template>
+    <div v-if="!isLoading">
+        <div id="edit-wrapper">
+            <div class="editor mt-2">
+                <VueEditor v-model="page.content"></VueEditor>
+            </div>
+            <b-button @click="saveContent" class="mt-3 mb-2">Save</b-button>
+        </div>
+    </div>
+    <div v-else>
+        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
+        <span class="sr-only">Loading …</span></div>
+</template>
+
+<script>
+
+import axios from "axios";
+
+// Basic Use - Covers most scenarios
+import { VueEditor } from "vue2-editor";
+
+
+
+export default {
+    name: 'PagesEdit',
+    components: {
+        VueEditor
+    },
+    data: () => ({
+        page: null,
+        isLoading: true
+    }),
+    methods: {
+        saveContent() {
+            console.log(this.page)
+            axios
+                .put('/api/pages/' + this.page.id, this.page)
+                .then(response => {
+                    console.log("resp:" + response)
+                })
+        }
+    },
+    beforeMount() {
+        const slug = this.$route.params.slug
+        console.log("slug: " + slug)
+
+        axios
+            .get('/api/pages?slug=' + slug)
+            .then(response => {
+                this.page = response.data['hydra:member'][0]
+                this.isLoading = false
+            })
+    },
+}
+</script>
+
+<style>
+    .ql-container {
+        height: 800px !important;
+        overflow-y: scroll;
+    }
+</style>

assets/js/components/pages/index.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+
+
+        <h2 v-if="page" v-html="page.name"></h2>
+
+        <div v-if="page" v-html="page.content"></div>
+        <b-button :to="editTarget" variant="outline"><i class="fa fa-2x fa-fw fa-edit"></i></b-button>
+        <hr>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+    name: "Pages",
+    data: () => ({
+        page: null
+    }),
+    watch: {
+        $route() {
+            console.log("watch called")
+            this.getPagesDetails()
+        }
+    },
+    beforeMount() {
+        this.getPagesDetails()
+    },
+    methods: {
+        getPagesDetails() {
+            const slug = this.$route.params.slug
+            console.log("slug: " + slug)
+
+            axios
+                .get('/api/pages?slug=' + slug)
+                .then(response => (this.page = response.data['hydra:member'][0]))
+        }
+    },
+    computed: {
+        editTarget() {
+            if (this.page) {
+                return "/pages/edit/" + this.page.slug
+            }
+        }
+    }
+}
+</script>