Merge branch 'migrate-to-nuxt' of https://github.com/JhumanJ/OpnForm into migrate-to-nuxt

2024-01-05 11:12:29 +01:00 · 2024-01-05 11:12:29 +01:00 · 8b92f24094
parent 8346fe7093 9c7d46b53b
commit 8b92f24094
45 changed files with 624 additions and 614 deletions
--- a/client/app.vue
+++ b/client/app.vue
@ -44,6 +44,17 @@ export default {
  components: {},

  setup() {
+    useOpnSeoMeta({
+      title: 'OpnForm',
+      description: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.',
+      ogImage: '/img/social-preview.jpg',
+    })
+    useHead({
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm';
+      }
+    })
+
    const appStore = useAppStore()

    return {
@ -57,8 +68,6 @@ export default {
  },

  data: () => ({
-    metaTitle: 'OpnForm',
-    metaDescription: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.',
    announcement: false,
    alert: {
      type: null,
--- a/client/components/global/Navbar.vue
+++ b/client/components/global/Navbar.vue
@ -203,7 +203,7 @@ export default {
      return !this.appStore.navbarHidden
    },
    userOnboarded() {
-      return this.user && this.user.workspaces_count > 0
+      return this.user && this.user.has_forms === true
    },
    hasCrisp() {
      return this.config.crispWebsiteId
--- a/client/components/open/forms/components/CopyContent.vue
+++ b/client/components/open/forms/components/CopyContent.vue
@ -6,7 +6,7 @@
      </p>
    </div>
    <div class="w-full sm:w-40 sm:ml-2 mt-2 sm:mt-0 shrink-0">
-      <v-button color="light-gray" class="w-full" @click="copyToClipboard(content)">
+      <v-button color="light-gray" class="w-full" @click="copyToClipboard">
        <slot name="icon">
          <svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 20 20" fill="none"
               xmlns="http://www.w3.org/2000/svg">
@ -21,47 +21,28 @@
  </div>
 </template>

-<script>
-export default {
-  name: 'CopyContent',
-  props: {
-    content: {
-      type: String,
-      required: true
-    },
-    isDraft: {
-      type: Boolean,
-      default: false
-    },
+<script setup>
+import { defineProps } from 'vue'
+const { copy } = useClipboard()
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true
  },
+  isDraft: {
+    type: Boolean,
+    default: false
+  }
+})

-  data() {
-    return {}
-  },
-
-  computed: {},
-
-  watch: {},
-
-  mounted() {
-  },
-
-  methods: {
-    copyToClipboard(str) {
-      if (process.server) return
-      const el = document.createElement('textarea')
-      el.value = str
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-      if(this.isDraft){
-        useAlert().warning('Copied! But other people won\'t be able to see the form since it\'s currently in draft mode')
-      } else {
-        useAlert().success('Copied!')
-      }
-
-    }
+const copyToClipboard = () => {
+  if (process.server) return
+  copy(props.content)
+  if(props.isDraft){
+    useAlert().warning('Copied! But other people won\'t be able to see the form since it\'s currently in draft mode')
+  } else {
+    useAlert().success('Copied!')
  }
 }
 </script>
--- a/client/components/open/forms/components/FormUrlPrefill.vue
+++ b/client/components/open/forms/components/FormUrlPrefill.vue
@ -17,72 +17,50 @@
  </div>
 </template>

-<script>
-export default {
-  name: 'FormUrlPrefill',
-  props: {
-    form: {
-      type: Object,
-      required: true
-    },
-    formData: {
-      type: Object,
-      required: true
-    },
-    extraQueryParam: {
-      type: String,
-      default: ''
-    }
+<script setup>
+import { defineProps, computed } from 'vue'
+const { copy } = useClipboard()
+
+const props = defineProps({
+  form: {
+    type: Object,
+    required: true
  },
-
-  data () {
-    return {}
+  formData: {
+    type: Object,
+    required: true
  },
-
-  computed: {
-    preFillUrl () {
-      const url = this.form.share_url
-      const uriComponents = new URLSearchParams()
-      this.form.properties.filter((property) => {
-        return this.formData.hasOwnProperty(property.id) && this.formData[property.id] !== null
-      }).forEach((property) => {
-        if (Array.isArray(this.formData[property.id])) {
-          this.formData[property.id].forEach((value) => {
-            uriComponents.append(property.id + '[]', value)
-          })
-        } else {
-          uriComponents.append(property.id, this.formData[property.id])
-        }
-      })
-
-      if(uriComponents.toString() !== ""){
-        return (this.extraQueryParam) ? url + '?' + uriComponents + '&' + this.extraQueryParam : url + '?' + uriComponents
-      }else{
-        return (this.extraQueryParam) ? url + '?' + this.extraQueryParam : url
-      }
-    }
-  },
-
-  watch: {},
-
-  mounted () {
-  },
-
-  methods: {
-    getPropertyUriComponent (property) {
-      const prefillValue = encodeURIComponent(this.formData[property.id])
-      return encodeURIComponent(property.id) + '=' + prefillValue
-    },
-    copyToClipboard () {
-      if (process.server) return
-      const str = this.preFillUrl
-      const el = document.createElement('textarea')
-      el.value = str
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-    }
+  extraQueryParam: {
+    type: String,
+    default: ''
  }
+})
+
+const preFillUrl = computed(() => {
+  const url = props.form.share_url
+  const uriComponents = new URLSearchParams()
+  props.form.properties.filter((property) => {
+    return props.formData.hasOwnProperty(property.id) && props.formData[property.id] !== null
+  }).forEach((property) => {
+    if (Array.isArray(props.formData[property.id])) {
+      props.formData[property.id].forEach((value) => {
+        uriComponents.append(property.id + '[]', value)
+      })
+    } else {
+      uriComponents.append(property.id, props.formData[property.id])
+    }
+  })
+
+  if(uriComponents.toString() !== ""){
+    return (props.extraQueryParam) ? url + '?' + uriComponents + '&' + props.extraQueryParam : url + '?' + uriComponents
+  }else{
+    return (props.extraQueryParam) ? url + '?' + props.extraQueryParam : url
+  }
+})
+
+const copyToClipboard = () => {
+  if (process.server) return
+  copy(preFillUrl.value)
+  useAlert().success('Copied!')
 }
 </script>
--- a/client/components/open/forms/components/templates/FormTemplateModal.vue
+++ b/client/components/open/forms/components/templates/FormTemplateModal.vue
@ -1,5 +1,5 @@
 <template>
-  <modal :show="show" @close="$emit('close')">
+  <modal :show="show" @close="emit('close')">
    <template #icon>
      <svg class="w-10 h-10 text-blue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
@ -57,11 +57,11 @@
              </template>
            </v-button>
            <v-button v-if="template" color="red" class="mr-2"
-                      @click.prevent="alertConfirm('Do you really want to delete this template?', deleteFormTemplate)"
+                      @click.prevent="useAlert().confirm('Do you really want to delete this template?', deleteFormTemplate)"
            >
              Delete
            </v-button>
-            <v-button color="white" @click.prevent="$emit('close')">
+            <v-button color="white" @click.prevent="emit('close')">
              Close
            </v-button>
          </div>
@ -71,118 +71,104 @@
  </modal>
 </template>

-<script>
-import { computed } from 'vue'
+<script setup>
+import { ref, defineProps, defineEmits, computed } from 'vue'
 import QuestionsEditor from './QuestionsEditor.vue'

-export default {
-  name: 'FormTemplateModal',
-  components: { QuestionsEditor },
-  props: {
-    show: { type: Boolean, required: true },
-    form: { type: Object, required: true },
-    template: { type: Object, required: false, default: () => {} }
-  },
+const props = defineProps({
+  show: { type: Boolean, required: true },
+  form: { type: Object, required: true },
+  template: { type: Object, required: false, default: () => {} }
+})

-  setup () {
-    const authStore = useAuthStore()
-    const templatesStore = useTemplatesStore()
+const authStore = useAuthStore()
+const templatesStore = useTemplatesStore()
+const router = useRouter()
+let user = computed(() => authStore.user)
+let templates = computed(() => [...templatesStore.content.values()])
+let industries = computed(() => [...templatesStore.industries.values()])
+let types = computed(() => [...templatesStore.types.values()])
+
+let templateForm = ref(null)
+const emit = defineEmits(['close'])
+
+onMounted(() => {
+  templateForm.value = useForm(props.template ?? {
+    publicly_listed: false,
+    name: '',
+    slug: '',
+    short_description: '',
+    description: '',
+    image_url: '',
+    types: null,
+    industries: null,
+    related_templates: null,
+    questions: []
+  })
+  loadAllTemplates(templatesStore)
+})
+
+let typesOptions = computed(() => {
+  return Object.values(types.value).map((type) => {
    return {
-      templatesStore,
-      user : computed(() => authStore.user),
-      templates : computed(() => templatesStore.content),
-      industries : computed(() => templatesStore.industries),
-      types : computed(() => templatesStore.types),
-      useAlert: useAlert()
+      name: type.name,
+      value: type.slug
    }
-  },
-
-  data: () => ({
-    templateForm: null
-  }),
-
-  mounted () {
-    this.templateForm = useForm(this.template ?? {
-      publicly_listed: false,
-      name: '',
-      slug: '',
-      short_description: '',
-      description: '',
-      image_url: '',
-      types: null,
-      industries: null,
-      related_templates: null,
-      questions: []
-    })
-    loadAllTemplates(this.templatesStore)
-  },
-
-  computed: {
-    typesOptions () {
-      return Object.values(this.types).map((type) => {
-        return {
-          name: type.name,
-          value: type.slug
-        }
-      })
-    },
-    industriesOptions () {
-      return Object.values(this.industries).map((industry) => {
-        return {
-          name: industry.name,
-          value: industry.slug
-        }
-      })
-    },
-    templatesOptions () {
-      return this.templates.map((template) => {
-        return {
-          name: template.name,
-          value: template.slug
-        }
-      })
+  })
+})
+let industriesOptions = computed(() => {
+  return Object.values(industries.value).map((industry) => {
+    return {
+      name: industry.name,
+      value: industry.slug
    }
-  },
-
-  methods: {
-    onSubmit () {
-      if (this.template) {
-        this.updateFormTemplate()
-      } else {
-        this.createFormTemplate()
-      }
-    },
-    async createFormTemplate () {
-      this.templateForm.form = this.form
-      await this.templateForm.post('/api/templates').then((response) => {
-        if (response.data.message) {
-          this.useAlert.success(response.data.message)
-        }
-        this.templatesStore.save(response.data.data)
-        this.$emit('close')
-      })
-    },
-    async updateFormTemplate () {
-      this.templateForm.form = this.form
-      await this.templateForm.put('/api/templates/' + this.template.id).then((response) => {
-        if (response.data.message) {
-          this.useAlert.success(response.data.message)
-        }
-        this.templatesStore.save(response.data.data)
-        this.$emit('close')
-      })
-    },
-    async deleteFormTemplate () {
-      if (!this.template) return
-      opnFetch('/templates/' + this.template.id, {method:'DELETE'}).then((data) => {
-        if (data.message) {
-          this.useAlert.success(data.message)
-        }
-        this.$router.push({ name: 'templates' })
-        this.templatesStore.remove(this.template)
-        this.$emit('close')
-      })
+  })
+})
+let templatesOptions = computed(() => {
+  return Object.values(templates.value).map((template) => {
+    return {
+      name: template.name,
+      value: template.slug
    }
+  })
+})
+
+const onSubmit = () => {
+  if (props.template) {
+    updateFormTemplate()
+  } else {
+    createFormTemplate()
  }
 }
+const createFormTemplate = async () => {
+  templateForm.value.form = props.form
+  await templateForm.value.post('/templates').then((data) => {
+    if (data.message) {
+      useAlert().success(data.message)
+    }
+    templatesStore.save(data.data)
+    emit('close')
+  })
+}
+const updateFormTemplate = async () => {
+  templateForm.value.form = props.form
+  await templateForm.value.put('/templates/' + props.template.id).then((data) => {
+    if (data.message) {
+      useAlert().success(data.message)
+    }
+    templatesStore.save(data.data)
+    emit('close')
+  })
+}
+const deleteFormTemplate = async () => {
+  if (!props.template) return
+  opnFetch('/templates/' + props.template.id, {method:'DELETE'}).then((data) => {
+    if (data.message) {
+      useAlert().success(data.message)
+    }
+    router.push({ name: 'templates' })
+    templatesStore.remove(props.template)
+    emit('close')
+  })
+}
 </script>
--- a/client/components/pages/forms/show/EmbedFormAsPopupModal.vue
+++ b/client/components/pages/forms/show/EmbedFormAsPopupModal.vue
@ -59,7 +59,7 @@
          </div>
        </div>

-        <collapse class="py-5 w-full border rounded-md px-4" :model-value="false">
+        <collapse class="py-5 w-full border rounded-md px-4" :model-value="true">
          <template #title>
            <div class="flex">
              <h3 class="font-semibold block text-lg">
@ -101,99 +101,87 @@
  </div>
 </template>

-<script>
-import Collapse from '~/components/global/Collapse.vue'
+<script setup>
+import { ref, defineProps, computed } from 'vue'

-export default {
-  name: 'EmbedFormAsPopupModal',
-  components: { Collapse },
-  props: {
-    form: { type: Object, required: true }
-  },
+const { copy } = useClipboard()
+const crisp = useCrisp()
+const props = defineProps({
+  form: { type: Object, required: true }
+})

-  data: () => ({
-    showEmbedFormAsPopupModal: false,
-    embedScriptUrl: 'widgets/embed-min.js',
-    advancedOptions: {
-      hide_title: false,
-      emoji: '💬',
-      position: 'right',
-      bgcolor: '#3B82F6',
-      width: '500'
-    }
-  }),
+const embedScriptUrl = '/widgets/embed-min.js'
+let showEmbedFormAsPopupModal = ref(false)
+let advancedOptions = ref({
+  hide_title: false,
+  emoji: '💬',
+  position: 'right',
+  bgcolor: '#3B82F6',
+  width: '500'
+})

-  computed: {
-    hideTitleHelp () {
-      return this.form.hide_title ? 'This option is disabled because the form title is already hidden' : null
-    },
-    shareUrl () {
-      return (this.advancedOptions.hide_title) ? this.form.share_url + '?hide_title=true' : this.form.share_url
-    },
-    embedPopupCode () {
-      const nfData = {
-        formurl: this.shareUrl,
-        emoji: this.advancedOptions.emoji,
-        position: this.advancedOptions.position,
-        bgcolor: this.advancedOptions.bgcolor,
-        width: this.advancedOptions.width
-      }
-      this.previewPopup(nfData)
-      return '<script async data-nf=\'' + JSON.stringify(nfData) + '\' src=\'' + this.asset(this.embedScriptUrl) + '\'></scrip' + 't>'
-    }
-  },
+let hideTitleHelp = computed(() => {
+  return props.form.hide_title ? 'This option is disabled because the form title is already hidden' : null
+})
+let shareUrl = computed(() => {
+  return (advancedOptions.value.hide_title) ? props.form.share_url + '?hide_title=true' : props.form.share_url
+})
+let embedPopupCode = computed(() => {
+  const nfData = {
+    formurl: shareUrl.value,
+    emoji: advancedOptions.value.emoji,
+    position: advancedOptions.value.position,
+    bgcolor: advancedOptions.value.bgcolor,
+    width: advancedOptions.value.width
+  }
+  previewPopup(nfData)
+  return '<script async data-nf=\'' + JSON.stringify(nfData) + '\' src=\'' + embedScriptUrl + '\'></scrip' + 't>'
+})

-  mounted () {
-    this.advancedOptions.bgcolor = this.form.color
-  },
+onMounted(() => {
+  advancedOptions.value.bgcolor = props.form.color
+})

-  methods: {
-    onClose () {
-      this.removePreview()
-      this.$crisp.push(['do', 'chat:show'])
-      this.showEmbedFormAsPopupModal = false
-    },
-    copyToClipboard () {
-      if (process.server) return
-      const str = this.embedPopupCode
-      const el = document.createElement('textarea')
-      el.value = str
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-    },
-    removePreview () {
-      if (process.server) return
-      const oldP = document.head.querySelector('#nf-popup-preview')
-      if (oldP) {
-        oldP.remove()
-      }
-      const oldM = document.body.querySelector('.nf-main')
-      if (oldM) {
-        oldM.remove()
-      }
-    },
-    previewPopup (nfData) {
-      if (process.server) return
-      if (!this.showEmbedFormAsPopupModal) {
-        return
-      }

-      // Remove old preview, if there
-      this.removePreview()
-
-      // Hide crisp
-      this.$crisp.push(['do', 'chat:hide'])
-
-      // Add new preview
-      const el = document.createElement('script')
-      el.id = 'nf-popup-preview'
-      el.async = true
-      el.src = this.asset(this.embedScriptUrl)
-      el.setAttribute('data-nf', JSON.stringify(nfData))
-      document.head.appendChild(el)
-    }
+const onClose = () => {
+  removePreview()
+  crisp.showChat()
+  showEmbedFormAsPopupModal.value = false
+}
+const copyToClipboard = () => {
+  if (process.server) return
+  copy(embedPopupCode.value)
+  useAlert().success('Copied!')
+}
+const removePreview = () => {
+  if (process.server) return
+  const oldP = document.head.querySelector('#nf-popup-preview')
+  if (oldP) {
+    oldP.remove()
+  }
+  const oldM = document.body.querySelector('.nf-main')
+  if (oldM) {
+    oldM.remove()
  }
 }
+const previewPopup = (nfData) => {
+  if (process.server) return
+  if (!showEmbedFormAsPopupModal.value) {
+    return
+  }
+
+  // Remove old preview, if there
+  removePreview()
+
+  // Hide crisp
+  crisp.hideChat()
+
+  // Add new preview
+  const el = document.createElement('script')
+  el.id = 'nf-popup-preview'
+  el.async = true
+  el.src = embedScriptUrl
+  el.setAttribute('data-nf', JSON.stringify(nfData))
+  document.head.appendChild(el)
+}
 </script>
--- a/client/components/pages/forms/show/ExtraMenu.vue
+++ b/client/components/pages/forms/show/ExtraMenu.vue
@ -138,70 +138,51 @@
  </div>
 </template>

-<script>
-import { computed } from 'vue'
+<script setup>
+import { ref, defineProps, computed } from 'vue'
 import Dropdown from '~/components/global/Dropdown.vue'
 import FormTemplateModal from '../../../open/forms/components/templates/FormTemplateModal.vue'

-export default {
-  name: 'ExtraMenu',
-  components: { Dropdown, FormTemplateModal },
-  props: {
-    form: { type: Object, required: true },
-    isMainPage: { type: Boolean, required: false, default: false }
-  },
+const { copy } = useClipboard()
+const router = useRouter()

-  setup () {
-    const authStore = useAuthStore()
-    const formsStore = useFormsStore()
-    return {
-      formsStore,
-      user: computed(() => authStore.user),
-      useAlert: useAlert()
-    }
-  },
+const props = defineProps({
+  form: { type: Object, required: true },
+  isMainPage: { type: Boolean, required: false, default: false }
+})

-  data: () => ({
-    loadingDuplicate: false,
-    loadingDelete: false,
-    showDeleteFormModal: false,
-    showFormTemplateModal: false
-  }),
+const authStore = useAuthStore()
+const formsStore = useFormsStore()
+const formEndpoint = '/open/forms/{id}'
+let user = computed(() => authStore.user)

-  computed: {
-    formEndpoint: () => '/open/forms/{id}'
-  },
+let loadingDuplicate = ref(false)
+let loadingDelete = ref(false)
+let showDeleteFormModal = ref(false)
+let showFormTemplateModal = ref(false)

-  methods: {
-    copyLink () {
-      const el = document.createElement('textarea')
-      el.value = this.form.share_url
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-      this.useAlert.success('Copied!')
-    },
-    duplicateForm () {
-      if (this.loadingDuplicate) return
-      this.loadingDuplicate = true
-      opnFetch(this.formEndpoint.replace('{id}', this.form.id) + '/duplicate',{method: 'POST'}).then((data) => {
-        this.formsStore.save(data.new_form)
-        this.$router.push({ name: 'forms-show', params: { slug: data.new_form.slug } })
-        this.useAlert.success('Form was successfully duplicated.')
-        this.loadingDuplicate = false
-      })
-    },
-    deleteForm () {
-      if (this.loadingDelete) return
-      this.loadingDelete = true
-      opnFetch(this.formEndpoint.replace('{id}', this.form.id),{method:'DELETE'}).then(() => {
-        this.formsStore.remove(this.form)
-        this.$router.push({ name: 'home' })
-        this.useAlert.success('Form was deleted.')
-        this.loadingDelete = false
-      })
-    }
-  }
+const copyLink = () => {
+  copy(props.form.share_url)
+  useAlert().success('Copied!')
+}
+const duplicateForm = () => {
+  if (loadingDuplicate.value) return
+  loadingDuplicate.value = true
+  opnFetch(formEndpoint.replace('{id}', props.form.id) + '/duplicate',{method: 'POST'}).then((data) => {
+    formsStore.save(data.new_form)
+    router.push({ name: 'forms-slug-show', params: { slug: data.new_form.slug } })
+    useAlert().success('Form was successfully duplicated.')
+    loadingDuplicate.value = false
+  })
+}
+const deleteForm = () => {
+  if (loadingDelete.value) return
+  loadingDelete.value = true
+  opnFetch(formEndpoint.replace('{id}', props.form.id),{method:'DELETE'}).then(() => {
+    formsStore.remove(props.form)
+    router.push({ name: 'home' })
+    useAlert().success('Form was deleted.')
+    loadingDelete.value = false
+  })
 }
 </script>
--- a/client/composables/useOpnSeoMeta.js
+++ b/client/composables/useOpnSeoMeta.js
@ -0,0 +1,16 @@
+export const useOpnSeoMeta = (meta) => {
+  return useSeoMeta({
+    ...meta.title ? {
+      ogTitle: meta.title,
+      twitterTitle: meta.title,
+    } : {},
+    ...meta.description ? {
+      ogDescription: meta.description,
+      twitterDescription: meta.description,
+    } : {},
+    ...meta.ogImage ? {
+      twitterImage: meta.ogImage,
+    } : {},
+    ...meta,
+  })
+}
--- a/client/error.vue
+++ b/client/error.vue
@ -0,0 +1,25 @@
+<template>
+  <NuxtLayout>
+    <div class="flex mt-6">
+      <div class="w-full md:w-2/3 md:mx-auto md:max-w-md">
+        <img alt="Nice plant as we have nothing else to show!" src="/img/icons/plant.png" class="w-56 mb-5">
+
+        <h1 class="mb-4 font-semibold text-3xl text-gray-900">
+          Page Not Found
+        </h1>
+
+        <div class="links">
+          <NuxtLink :to="{ name: 'index' }" class="hover:underline text-gray-700">
+            Go Home
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </NuxtLayout>
+</template>
+
+<script setup>
+useOpnSeoMeta({
+  title: '404 - Page not found'
+})
+</script>
--- a/client/mixins/seo-meta.js
+++ b/client/mixins/seo-meta.js
@ -1,23 +0,0 @@
-export default {
-  metaInfo () {
-    const title = this.metaTitle ?? 'OpnForm'
-    const description = this.metaDescription ?? "Create beautiful forms for free. Unlimited fields, unlimited submissions. It's free and it takes less than 1 minute to create your first form."
-    const image = this.metaImage ?? this.asset('img/social-preview.jpg')
-    const metaTemplate = this.metaTemplate ?? '%s · OpnForm'
-
-    return {
-      title: title,
-      titleTemplate: metaTemplate,
-      meta: [
-        ...(this.metaTags ?? []),
-        { vmid: 'og:title', property: 'og:title', content: title },
-        { vmid: 'twitter:title', property: 'twitter:title', content: title },
-        { vmid: 'description', name: 'description', content: description },
-        { vmid: 'og:description', property: 'og:description', content: description },
-        { vmid: 'twitter:description', property: 'twitter:description', content: description },
-        { vmid: 'twitter:image', property: 'twitter:image', content: image },
-        { vmid: 'og:image', property: 'og:image', content: image }
-      ]
-    }
-  }
-}
--- a/client/pages/ai-form-builder.vue
+++ b/client/pages/ai-form-builder.vue
@ -493,39 +493,21 @@
  </div>
 </template>

-<script>
+<script setup>
 import { computed } from 'vue'
 import { useAuthStore } from '../stores/auth'
-import SeoMeta from '../mixins/seo-meta.js'

-export default {
-  layout: 'default',
-  mixins: [SeoMeta],
+const authStore = useAuthStore()

-  setup () {
-    const authStore = useAuthStore()
-    defineRouteRules({
-      prerender: true
-    })
+useOpnSeoMeta({
+  title: 'Free AI form builder',
+  description: 'Transform your ideas into fully functional forms with OpnForm AI Builder – quick, accurate, and tailored to fit any requirement.'
+})
+defineRouteRules({
+  prerender: true
+})

-    return {
-      authenticated : computed(() => authStore.check),
-    }
-  },
-
-  data: () => ({
-    title: 'OpnForm',
-    metaTitle: 'AI form builder for free',
-  }),
-
-  mounted() {},
-
-  methods: {},
-
-  computed: {
-    configLinks: () => this.$config.links
-  }
-}
+let authenticated = computed(() => authStore.check)
 </script>

 <style lang="scss" scoped>
--- a/client/pages/auth/password/email.vue
+++ b/client/pages/auth/password/email.vue
@ -24,10 +24,16 @@

 <script>
 export default {
-  middleware: 'guest',
+  setup () {
+    definePageMeta({
+      middleware: "guest"
+    })
+    useOpnSeoMeta({
+      title: 'Reset Password'
+    })
+  },

  data: () => ({
-    metaTitle: 'Reset Password',
    status: '',
    form: useForm({
      email: ''
--- a/client/pages/auth/password/reset.vue
+++ b/client/pages/auth/password/reset.vue
@ -34,10 +34,16 @@

 <script>
 export default {
-  middleware: 'guest',
+  setup () {
+    definePageMeta({
+      middleware: "guest"
+    })
+    useOpnSeoMeta({
+      title: 'Reset Password'
+    })
+  },

  data: () => ({
-    metaTitle: 'Reset Password',
    status: '',
    form: useForm({
      token: '',
--- a/client/pages/errors/404.vue
+++ b/client/pages/errors/404.vue
@ -1,24 +0,0 @@
-<template>
-  <div class="flex mt-6">
-    <div class="w-full md:w-2/3 md:mx-auto md:max-w-md">
-      <img alt="Nice plant as we have nothing else to show!" src="/img/icons/plant.png" class="w-56 mb-5">
-
-
-      <h1 class="mb-4 font-semibold text-3xl text-gray-900">
-        Page Not Found
-      </h1>
-
-      <div class="links">
-        <NuxtLink :to="{ name: 'index' }" class="hover:underline text-gray-700">
-          Go Home
-        </NuxtLink>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NotFound'
-}
-</script>
--- a/client/pages/forms/[slug]/edit.vue
+++ b/client/pages/forms/[slug]/edit.vue
@ -22,7 +22,6 @@ import {hash} from "~/lib/utils.js";
 export default {
  name: 'EditForm',
  components: { Breadcrumb, FormEditor },
-  middleware: 'auth',

  beforeRouteLeave (to, from, next) {
    if (this.isDirty()) {
@ -52,6 +51,13 @@ export default {
      }
    })

+    useOpnSeoMeta({
+      title: 'Edit ' + ((form && form.value) ? form.value.title : 'Your Form')
+    })
+    definePageMeta({
+      middleware: "auth"
+    })
+
    return {
      formsStore,
      workingFormStore,
@ -70,9 +76,6 @@ export default {
  },

  computed: {
-    metaTitle () {
-      return 'Edit ' + (this.form ? this.form.title : 'Your Form')
-    }
  },

  async beforeMount() {
--- a/client/pages/forms/[slug]/index.vue
+++ b/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>
--- a/client/pages/forms/[slug]/show.vue
+++ b/client/pages/forms/[slug]/show.vue
@ -141,9 +141,14 @@ export default {
    FormCleanings
  },

-  middleware: 'auth',
-
  setup () {
+    definePageMeta({
+      middleware: "auth"
+    })
+    useOpnSeoMeta({
+      title: 'Home'
+    })
+
    const authStore = useAuthStore()
    const formsStore = useFormsStore()
    const workingFormStore = useWorkingFormStore()
@ -167,7 +172,6 @@ export default {

  data () {
    return {
-      metaTitle: 'Home',
      tabsList: [
        {
          name: 'Submissions',
--- a/client/pages/forms/[slug]/show/share.vue
+++ b/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,15 @@ export default {
    form: {type: Object, required: true},
  },

+  setup (props) {
+    definePageMeta({
+      middleware: "auth"
+    })
+    useOpnSeoMeta({
+      title: (props.form) ? 'Share Form - '+props.form.title : 'Share Form'
+    })
+  },
+
  data: () => ({
    shareFormConfig: {
      hide_title: false,
@ -53,9 +61,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)) {
--- a/client/pages/forms/[slug]/show/stats.vue
+++ b/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,16 @@ export default {
    form: {type: Object, required: true},
  },

+  setup (props) {
+    definePageMeta({
+      middleware: "auth"
+    })
+    useOpnSeoMeta({
+      title: (props.form) ? 'Form Analytics - '+props.form.title : 'Form Analytics'
+    })
+  },
+
  computed: {
-    metaTitle() {
-      return (this.form ? ('Form Analytics - ' + this.form.title) : 'Form Analytics')
-    }
  }
 }
 </script>
--- a/client/pages/forms/[slug]/show/submissions.vue
+++ b/client/pages/forms/[slug]/show/submissions.vue
@ -6,14 +6,21 @@

 <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) {
+    definePageMeta({
+      middleware: "auth"
+    })
+    useOpnSeoMeta({
+      title: (props.form) ? 'Form Submissions - '+props.form.title : 'Form Submissions'
+    })
+  },

  data: () => ({}),

@ -21,9 +28,6 @@ export default {
  },

  computed: {
-    metaTitle() {
-      return (this.form) ? 'Form Submissions - ' + this.form.title : 'Form Submissions'
-    },
  },

  methods: {}
--- a/client/pages/forms/create/guest.vue
+++ b/client/pages/forms/create/guest.vue
@ -48,7 +48,13 @@ const workspace = computed(() => workspacesStore.getCurrent)
 const workspacesLoading = computed(() => workspacesStore.loading)
 const form = storeToRefs(workingFormStore).content

-// metaTitle: 'Create a new Form as Guest',
+useOpnSeoMeta({
+  title: 'Create a new Form for free',
+})
+definePageMeta({
+  middleware: "guest"
+})
+
 // Data
 const stateReady = ref(false)
 const loading = ref(false)
--- a/client/pages/forms/create/index.vue
+++ b/client/pages/forms/create/index.vue
@ -33,7 +33,9 @@ definePageMeta({
  middleware: "auth"
 })

-const metaTitle = 'Create a new Form'
+useOpnSeoMeta({
+  title: 'Create a new Form'
+})

 onBeforeRouteLeave((to, from, next) => {
  if (isDirty()) {
--- a/client/pages/home.vue
+++ b/client/pages/home.vue
@ -125,11 +125,10 @@ definePageMeta({
  middleware: "auth"
 })

-// metaTitle: {type: String, default: 'Your Forms'},
-// metaDescription: {
-//   type: String,
-//   default: 'All of your OpnForm are here. Create new forms, or update your existing one!'
-// }
+useOpnSeoMeta({
+  title: 'Your Forms',
+  description: 'All of your OpnForm are here. Create new forms, or update your existing forms.'
+})

 const authStore = useAuthStore()
 const formsStore = useFormsStore()
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@ -191,12 +191,10 @@ import PricingTable from '../components/pages/pricing/PricingTable.vue'
 import AiFeature from '~/components/pages/welcome/AiFeature.vue'
 import Testimonials from '../components/pages/welcome/Testimonials.vue'
 import TemplatesSlider from '../components/pages/welcome/TemplatesSlider.vue'
-import SeoMeta from '../mixins/seo-meta.js'
 import opnformConfig from "~/opnform.config.js";

 export default {
  components: {Testimonials, Features, MoreFeatures, PricingTable, AiFeature, TemplatesSlider},
-  mixins: [SeoMeta],
  layout: 'default',

  setup() {
@ -213,8 +211,6 @@ export default {
  },

  data: () => ({
-    title: 'OpnForm',
-    metaTitle: 'Create beautiful & open-source forms for free'
  }),

  computed: {
--- a/client/pages/login.vue
+++ b/client/pages/login.vue
@ -52,29 +52,16 @@
  </div>
 </template>

-<script>
+<script setup>
 import LoginForm from "~/components/pages/auth/components/LoginForm.vue"

-export default {
-  components: {
-    LoginForm
-  },
-
-  setup() {
-    definePageMeta({
-      middleware: "guest"
-    })
-    defineRouteRules({
-      prerender: true
-    })
-  },
-
-  data: () => ({
-    metaTitle: 'Login',
-  }),
-
-  methods: {
-
-  }
-}
+definePageMeta({
+  middleware: "guest"
+})
+defineRouteRules({
+  prerender: true
+})
+useOpnSeoMeta({
+  title: 'Login'
+})
 </script>
--- a/client/pages/pricing.vue
+++ b/client/pages/pricing.vue
@ -245,6 +245,11 @@ export default {
  layout: 'default',

  setup () {
+    useOpnSeoMeta({
+      title: 'Pricing',
+      description: 'All of our core features are free, and there is no quantity limit. You can also created more advanced and customized forms with OpnForms Pro.'
+    })
+
    definePageMeta({
      middleware: [
        function (to, from) {
@ -264,15 +269,6 @@ export default {
    }
  },

-  data: () => ({
-    metaTitle: 'Pricing',
-    metaDescription: 'All of our core features are free, and there is no quantity limit. You can also created more advanced and customized forms with OpnForms Pro.',
-  }),
-
-  mounted() {},
-
-  computed: {},
-
  methods: {
    contactUs() {
      window.$crisp.push(['do', 'chat:show'])
--- a/client/pages/privacy-policy.vue
+++ b/client/pages/privacy-policy.vue
@ -13,12 +13,13 @@
 </template>

 <script setup>
-
-// metaTitle: 'Privacy Policy',
-
 import {useNotionPagesStore} from "~/stores/notion_pages.js";
 import {computed} from "vue";

+useOpnSeoMeta({
+  title: 'Privacy Policy'
+})
+
 const notionPageStore = useNotionPagesStore()
 await notionPageStore.load('9c97349ceda7455aab9b341d1ff70f79')

--- a/client/pages/register.vue
+++ b/client/pages/register.vue
@ -64,6 +64,10 @@ export default {
  },

  setup() {
+    useOpnSeoMeta({
+      title: 'Register'
+    })
+
    definePageMeta({
      middleware: "guest"
    })
@ -72,10 +76,7 @@ export default {
    })
  },

-  middleware: 'guest',
-
  data: () => ({
-    metaTitle: 'Register'
  }),

  computed: {},
--- a/client/pages/settings.vue
+++ b/client/pages/settings.vue
@ -11,7 +11,7 @@
            <ul class="flex text-gray-500">
              <li>{{ user.email }}</li>
            </ul>
-  
+
            <div class="mt-4 border-b border-gray-200 dark:border-gray-700">
              <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
                <li v-for="(tab, i) in tabsList" :key="i+1" class="mr-6">
@ -36,15 +36,19 @@
      </div>
    </div>
  </template>
-  
+
  <script setup>
  import { computed } from 'vue'
  import { useAuthStore } from '../stores/auth'
-  
+
  definePageMeta({
    middleware: "auth"
  })
-  
+
+  useOpnSeoMeta({
+    title: 'Settings'
+  })
+
  const authStore = useAuthStore()
  const user = computed(() => authStore.user)
  const tabsList = computed(() => {
@ -66,22 +70,21 @@
        route: 'settings-account'
      }
    ]
-  
+
    if (user.value.is_subscribed) {
      tabs.splice(1, 0, {
        name: 'Billing',
        route: 'settings-billing'
      })
    }
-  
+
    if (user.value.admin) {
      tabs.push({
        name: 'Admin',
        route: 'settings-admin'
      })
    }
-  
+
    return tabs
  })
  </script>
-  
--- a/client/pages/settings/account.vue
+++ b/client/pages/settings/account.vue
@ -20,15 +20,21 @@ import { useRouter } from 'vue-router';

 const router = useRouter()
 const authStore = useAuthStore()
-const metaTitle = 'Account'
 let loading = false

+useOpnSeoMeta({
+  title: 'Account'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
 const deleteAccount = () => {
  loading = true
  opnFetch('/user', {method:'DELETE'}).then(async (data) => {
    loading = false
    useAlert().success(data.message)
-    
+
    // Log out the user.
    await authStore.logout()

--- a/client/pages/settings/admin.vue
+++ b/client/pages/settings/admin.vue
@ -41,7 +41,10 @@ definePageMeta({
  middleware: "admin"
 })

-const  metaTitle = 'Admin'
+useOpnSeoMeta({
+  title: 'Admin'
+})
+
 const authStore = useAuthStore()
 const workspacesStore = useWorkspacesStore()
 const router = useRouter()
--- a/client/pages/settings/billing.vue
+++ b/client/pages/settings/billing.vue
@ -24,7 +24,13 @@ import { computed } from 'vue'
 import { useAuthStore } from '../../stores/auth'
 import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'

-const metaTitle = 'Billing'
+useOpnSeoMeta({
+  title: 'Billing'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
 const authStore = useAuthStore()
 let user = computed(() => authStore.user)
 let billingLoading = false
--- a/client/pages/settings/password.vue
+++ b/client/pages/settings/password.vue
@ -25,7 +25,13 @@
 </template>

 <script setup>
-const metaTitle = 'Password'
+useOpnSeoMeta({
+  title: 'Password'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
 let form = useForm({
  password: '',
  password_confirmation: ''
--- a/client/pages/settings/profile.vue
+++ b/client/pages/settings/profile.vue
@ -23,7 +23,14 @@
 <script setup>
 const authStore = useAuthStore()
 const user = computed(() => authStore.user)
-const metaTitle = 'Profile'
+
+useOpnSeoMeta({
+  title: 'Profile'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
 let form = useForm({
  name: '',
  email: ''
--- a/client/pages/settings/workspace.vue
+++ b/client/pages/settings/workspace.vue
@ -122,7 +122,14 @@ const crisp = useCrisp()
 const workspacesStore = useWorkspacesStore()
 const workspaces = computed(() => workspacesStore.getAll)
 let loading = computed(() => workspacesStore.loading)
-const metaTitle = 'Workspaces'
+
+useOpnSeoMeta({
+  title: 'Workspaces'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
 let form = useForm({
  name: '',
  emoji: ''
--- a/client/pages/subscriptions/error.vue
+++ b/client/pages/subscriptions/error.vue
@ -3,15 +3,17 @@
 <script>
 import { computed } from 'vue'
 import { useAuthStore } from '../../stores/auth'
-import SeoMeta from '../../mixins/seo-meta.js'

 export default {
  components: { },
  layout: 'default',
  middleware: 'auth',
-  mixins: [SeoMeta],

  setup () {
+    useOpnSeoMeta({
+      title: 'Error'
+    })
+
    const authStore = useAuthStore()
    return {
      authenticated : computed(() => authStore.check),
@ -19,7 +21,6 @@ export default {
  },

  data: () => ({
-    metaTitle: 'Error',
  }),

  mounted () {
--- a/client/pages/subscriptions/success.vue
+++ b/client/pages/subscriptions/success.vue
@ -18,13 +18,16 @@
 <script>
 import { computed } from 'vue'
 import { useAuthStore } from '../../stores/auth'
-import SeoMeta from '../../mixins/seo-meta.js'

 export default {
  layout: 'default',
  middleware: 'auth',

  setup () {
+    useOpnSeoMeta({
+      title: 'Subscription Success'
+    })
+
    const authStore = useAuthStore()
    return {
      authStore,
@ -34,7 +37,6 @@ export default {
  },

  data: () => ({
-    metaTitle: 'Subscription Success',
    interval: null
  }),

--- a/client/pages/templates/[slug].vue
+++ b/client/pages/templates/[slug].vue
@ -6,9 +6,9 @@
          <v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true">
            Edit Template
          </v-button>
-          <!--          <form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal"-->
-          <!--                               @close="showFormTemplateModal=false"-->
-          <!--          />-->
+          <form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal"
+                              @close="showFormTemplateModal=false"
+          />
        </div>
      </template>
      <template #right>
@ -199,12 +199,14 @@ import {computed} from 'vue'
 import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
 import Breadcrumb from '~/components/global/Breadcrumb.vue'
 import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'
-import {fetchTemplate} from "~/stores/templates.js";
+import {fetchTemplate} from "~/stores/templates.js"
+import FormTemplateModal from '~/components/open/forms/components/templates/FormTemplateModal.vue'

 defineRouteRules({
  prerender: true
 })

+const { copy } = useClipboard()
 const authStore = useAuthStore()
 const templatesStore = useTemplatesStore()

@ -255,34 +257,29 @@ const cleanQuotes = (str) => {
 }

 const copyTemplateUrl = () => {
-  const str = template.value.share_url
-  const el = document.createElement('textarea')
-  el.value = str
-  document.body.appendChild(el)
-  el.select()
-  document.execCommand('copy')
-  document.body.removeChild(el)
+  copy(template.value.share_url)
  useAlert().success('Copied!')
 }

-// metaTitle() {
-//   return this.template ? this.template.name : 'Form Template'
-// },
-// metaDescription() {
-//   if (!this.template) return null
-//   // take the first 140 characters of the description
-//   return this.template.short_description?.substring(0, 140) + '... | Customize any template and create your own form in minutes.'
-// },
-// metaImage() {
-//   if (!this.template) return null
-//   return this.template.image_url
-// },
-// metaTags() {
-//   if (!this.template) {
-//     return [];
-//   }
-//   return this.template.publicly_listed ? [] : [{name: 'robots', content: 'noindex'}]
-// },
+useOpnSeoMeta({
+  title: () => {
+    if (!template || !template.value) return 'Form Template'
+    return template.value.name
+  },
+  description () {
+    if (!template || !template.value) return null
+    // take the first 140 characters of the description
+    return template.value.short_description?.substring(0, 140) + '... | Customize any template and create your own form in minutes.'
+  },
+  ogImage () {
+    if (!template || !template.value) return null
+    return template.value.image_url
+  },
+  robots () {
+    if (!template || !template.value) return null
+    return template.value.publicly_listed ? null : 'noindex'
+  }
+})
 </script>

 <style lang='scss'>
--- a/client/pages/templates/index.vue
+++ b/client/pages/templates/index.vue
@ -26,10 +26,10 @@ defineRouteRules({
  prerender: true
 })

-// props: {
-//   metaTitle: { type: String, default: 'Templates' },
-//   metaDescription: { type: String, default: 'Our collection of beautiful templates to create your own forms!' }
-// },
+useOpnSeoMeta({
+  title: 'Form Templates',
+  description: 'Our collection of beautiful templates to create your own forms!'
+})

 const templatesStore = useTemplatesStore()
 loadAllTemplates(templatesStore)
--- a/client/pages/templates/industries/[slug].vue
+++ b/client/pages/templates/industries/[slug].vue
@ -3,7 +3,7 @@
    <breadcrumb :path="breadcrumbs"/>

    <p v-if="industry === null || !industry" class="text-center my-4">
-      We could not find this type.
+      We could not find this industry.
    </p>
    <template v-else>
      <section class="py-12 sm:py-16 bg-gray-50 border-b border-gray-200">
@ -23,7 +23,7 @@
      </section>


-      <templates-list :templates="templates" :filter-industries="false" :show-types="false">
+      <templates-list :templates="templates" :filter-industries="false" :show-industries="false">
        <template #before-lists>
          <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
            <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
@ -70,6 +70,29 @@ const breadcrumbs = computed(() => {

 const industry = computed(() => templatesStore.industries.get(route.params.slug))

+useOpnSeoMeta({
+  title: () => {
+    if (!industry.value) return 'Form Templates'
+    if (industry.value.meta_title.length > 60) {
+      return industry.value.meta_title
+    }
+    return industry.value.meta_title
+  },
+  description: () => industry.value ? industry.value.meta_description: 'Our collection of beautiful templates to create your own forms!'
+})
+useHead({
+  titleTemplate: (titleChunk) => {
+    // Disable title template for longer titles
+    if (industry.value
+      && industry.value.meta_title.length < 60
+      && !industry.value.meta_title.toLowerCase().includes('opnform')
+    ) {
+      return titleChunk ? `${titleChunk} - OpnForm` : 'Form Templates - OpnForm'
+    }
+    return titleChunk ? titleChunk : 'Form Templates - OpnForm'
+  }
+})
+
 </script>

 <style lang='scss'>
--- a/client/pages/templates/my-templates.vue
+++ b/client/pages/templates/my-templates.vue
@ -13,30 +13,28 @@
      </div>
    </section>

-<!--    <templates-list :only-my="true" />-->
+   <templates-list :templates="templates" :loading="loading" :show-types="false" :show-industries="false"/>
  </div>
 </template>

-<script>
-import TemplatesList from '../../components/pages/templates/TemplatesList.vue'
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})

-export default {
-  components: { TemplatesList },
-  middleware: 'auth',
+useOpnSeoMeta({
+  title: 'My Templates',
+  description: 'Our collection of beautiful templates to create your own forms!'
+})

-  props: {
-    metaTitle: { type: String, default: 'My Templates' },
-    metaDescription: { type: String, default: 'Our collection of beautiful templates to create your own forms!' }
-  },
+let loading = ref(false)
+let templates = ref([])

-  data () {
-    return {}
-  },
-
-  mounted () {},
-
-  computed: {},
-
-  methods: {}
-}
+onMounted(() => {
+  loading.value = true
+  opnFetch('templates',{query: {onlymy: true}}).then((data) => {
+    loading.value = false
+    templates.value = data
+  })
+})
 </script>
--- a/client/pages/templates/types/[slug].vue
+++ b/client/pages/templates/types/[slug].vue
@ -71,6 +71,29 @@ const breadcrumbs = computed(() => {

 const type = computed(() => templatesStore.types.get(route.params.slug))

+useOpnSeoMeta({
+  title: () => {
+    if (!type.value) return 'Form Templates'
+    if (type.value.meta_title.length > 60) {
+      return type.value.meta_title
+    }
+    return type.value.meta_title
+  },
+  description: () => type.value ? type.value.meta_description: 'Our collection of beautiful templates to create your own forms!'
+})
+useHead({
+  titleTemplate: (titleChunk) => {
+    // Disable title template for longer titles
+    if (type.value
+      && type.value.meta_title.length < 60
+      && !type.value.meta_title.toLowerCase().includes('opnform')
+    ) {
+      return titleChunk ? `${titleChunk} - OpnForm` : 'Form Templates - OpnForm'
+    }
+    return titleChunk ? titleChunk : 'Form Templates - OpnForm'
+  }
+})
+
 </script>

 <style lang='scss'>
--- a/client/pages/terms-conditions.vue
+++ b/client/pages/terms-conditions.vue
@ -13,11 +13,13 @@
 </template>

 <script setup>
-// metaTitle: 'Terms & Conditions',
-
 import {useNotionPagesStore} from "~/stores/notion_pages.js";
 import {computed} from "vue";

+useOpnSeoMeta({
+  title: 'Terms & Conditions'
+})
+
 const notionPageStore = useNotionPagesStore()
 await notionPageStore.load('246420da2834480ca04047b0c5a00929')

--- a/client/public/favicon.ico
+++ b/client/public/favicon.ico
--- a/client/public/robots.txt
+++ b/client/public/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Disallow: