SEO meta nuxt migration (#274)

* SEO meta nuxt migration

* Polish seo metas, add defaults for OG and twitter

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/pages/forms/[slug]/edit.vue

@@ -52,6 +52,10 @@ export default {
       }
     })
 
+    useOpnSeoMeta({
+      title: 'Edit ' + ((form && form.value) ? form.value.title : 'Your Form')
+    })
+
     return {
       formsStore,
       workingFormStore,
@@ -70,9 +74,6 @@ export default {
   },
 
   computed: {
-    metaTitle () {
-      return 'Edit ' + (this.form ? this.form.title : 'Your Form')
-    }
   },
 
   async beforeMount() {

client/pages/forms/[slug]/index.vue

@@ -113,32 +113,36 @@ onMounted(() => {
 
 await loadForm(slug)
 
-// metaTitle () {
-//   if (this.form && this.form.is_pro && this.form.seo_meta.page_title) {
-//     return this.form.seo_meta.page_title
-//   }
-//   return this.form ? this.form.title : 'Create beautiful forms'
-// },
-// metaTemplate () {
-//   if (this.form && this.form.is_pro && this.form.seo_meta.page_title) {
-//     // Disable template if custom SEO title
-//     return '%s'
-//   }
-//   return null
-// },
-// metaDescription () {
-//   if (this.form && this.form.is_pro && this.form.seo_meta.page_description) {
-//     return this.form.seo_meta.page_description
-//   }
-//   return (this.form && this.form.description) ? this.form.description.substring(0, 160) : null
-// },
-// metaImage () {
-//   if (this.form && this.form.is_pro && this.form.seo_meta.page_thumbnail) {
-//     return this.form.seo_meta.page_thumbnail
-//   }
-//   return (this.form && this.form.cover_picture) ? this.form.cover_picture : null
-// },
-// metaTags () {
-//   return (this.form && this.form.can_be_indexed) ? [] : [{ name: 'robots', content: 'noindex' }]
-// }
+useOpnSeoMeta({
+  title: () => {
+    if (form && form.value.is_pro && form.value.seo_meta.page_title) {
+      return form.value.seo_meta.page_title
+    }
+    return form.value ? form.value.title : 'Create beautiful forms'
+  },
+  description () {
+    if (form && form.value.is_pro && form.value.seo_meta.page_description) {
+      return form.value.seo_meta.page_description
+    }
+    return (form && form.value.description) ? form.value.description.substring(0, 160) : null
+  },
+  ogImage () {
+    if (form && form.value.is_pro && form.value.seo_meta.page_thumbnail) {
+      return form.value.seo_meta.page_thumbnail
+    }
+    return (form && form.value.cover_picture) ? form.value.cover_picture : null
+  },
+  robots () {
+    return (form && form.value.can_be_indexed) ? null : 'noindex, nofollow'
+  }
+})
+useHead({
+  titleTemplate: (titleChunk) => {
+    if (form && form.value.is_pro && form.value.seo_meta.page_title) {
+      // Disable template if custom SEO title
+      return titleChunk
+    }
+    return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm';
+  }
+})
 </script>

client/pages/forms/[slug]/show.vue

@@ -144,6 +144,10 @@ export default {
   middleware: 'auth',
 
   setup () {
+    useOpnSeoMeta({
+      title: 'Home'
+    })
+
     const authStore = useAuthStore()
     const formsStore = useFormsStore()
     const workingFormStore = useWorkingFormStore()
@@ -167,7 +171,6 @@ export default {
 
   data () {
     return {
-      metaTitle: 'Home',
       tabsList: [
         {
           name: 'Submissions',

client/pages/forms/[slug]/show/share.vue

@@ -26,7 +26,6 @@ import EmbedCode from '../../../../components/pages/forms/show/EmbedCode.vue'
 import FormQrCode from '../../../../components/pages/forms/show/FormQrCode.vue'
 import UrlFormPrefill from '../../../../components/pages/forms/show/UrlFormPrefill.vue'
 import RegenerateFormLink from '../../../../components/pages/forms/show/RegenerateFormLink.vue'
-import SeoMeta from '../../../../mixins/seo-meta.js'
 import AdvancedFormUrlSettings from '../../../../components/open/forms/components/AdvancedFormUrlSettings.vue'
 import EmbedFormAsPopupModal from '../../../../components/pages/forms/show/EmbedFormAsPopupModal.vue'
 
@@ -45,6 +44,12 @@ export default {
     form: {type: Object, required: true},
   },
 
+  setup (props) {
+    useOpnSeoMeta({
+      title: (props.form) ? 'Share Form - '+props.form.title : 'Share Form'
+    })
+  },
+
   data: () => ({
     shareFormConfig: {
       hide_title: false,
@@ -53,9 +58,6 @@ export default {
   }),
 
   computed: {
-    metaTitle() {
-      return (this.form) ? 'Form Share - '+this.form.title : 'Form Share'
-    },
     shareUrlForQueryParams () {
       let queryStr = ''
       for (const [key, value] of Object.entries(this.shareFormConfig)) {

client/pages/forms/[slug]/show/stats.vue

@@ -9,7 +9,6 @@
 
 <script>
 import FormStats from '../../../../components/open/forms/components/FormStats.vue'
-import SeoMeta from '../../../../mixins/seo-meta.js'
 
 export default {
   components: {FormStats},
@@ -18,10 +17,13 @@ export default {
     form: {type: Object, required: true},
   },
 
+  setup (props) {
+    useOpnSeoMeta({
+      title: (props.form) ? 'Form Analytics - '+props.form.title : 'Form Analytics'
+    })
+  },
+
   computed: {
-    metaTitle() {
-      return (this.form ? ('Form Analytics - ' + this.form.title) : 'Form Analytics')
-    }
   }
 }
 </script>

client/pages/forms/[slug]/show/submissions.vue

@@ -6,14 +6,18 @@
 
 <script>
 import FormSubmissions from '../../../../components/open/forms/components/FormSubmissions.vue'
-import SeoMeta from '../../../../mixins/seo-meta.js'
 
 export default {
   components: {FormSubmissions},
   props: {
     form: {type: Object, required: true}
   },
-  mixins: [SeoMeta],
+
+  setup (props) {
+    useOpnSeoMeta({
+      title: (props.form) ? 'Form Submissions - '+props.form.title : 'Form Submissions'
+    })
+  },
 
   data: () => ({}),
 
@@ -21,9 +25,6 @@ export default {
   },
 
   computed: {
-    metaTitle() {
-      return (this.form) ? 'Form Submissions - ' + this.form.title : 'Form Submissions'
-    },
   },
 
   methods: {}