simple langs for pagebuilder

src/components/MagicoPagebuilder.vue

@@ -21,7 +21,7 @@
               data-bs-toggle="dropdown"
               aria-expanded="false"
             >
-              Szablony
+              {{ t('pagebuilder.template') }}
             </button>
             <ul class="dropdown-menu">
               <li>
@@ -32,7 +32,7 @@
                   "
                   class="dropdown-item"
                   href="#"
-                  >Wczytaj szablon</a
+                  >{{ t('pagebuilder.import_template') }}</a
                 >
               </li>
               <li>
@@ -43,7 +43,7 @@
                   "
                   class="dropdown-item"
                   href="#"
-                  >Zapisz jako szablon</a
+                  >{{ t('pagebuilder.save_template') }}</a
                 >
               </li>
               <li v-if="descriptionAllegro">
@@ -52,14 +52,14 @@
                 >
               </li>
               <li>
-                <a @click.prevent="copyClipboard" class="dropdown-item" href="#"
-                  >Kopiuj do schowka</a
-                >
+                <a @click.prevent="copyClipboard" class="dropdown-item" href="#">{{
+                  t('pagebuilder.copy_template')
+                }}</a>
               </li>
               <li v-if="pasteAvailable">
-                <a @click.prevent="pasteClipboard" class="dropdown-item" href="#"
-                  >Wklej ze schowka</a
-                >
+                <a @click.prevent="pasteClipboard" class="dropdown-item" href="#">{{
+                  t('pagebuilder.paste_template')
+                }}</a>
               </li>
             </ul>
           </div>
@@ -107,7 +107,7 @@
             class="btn btn-success mr-1"
             :disabled="!pageType.name"
           >
-            Zapisz do schowka
+            {{ t('pagebuilder.copy_template') }}
           </button>
         </div>
       </b-modal>
@@ -138,7 +138,7 @@
       <b-modal
         class_other="modal-xl"
         v-model="modalAddSection"
-        title=" Dodaj sekcję"
+        :title="t('pagebuilder.add_section')"
         v-on:onClose="modalAddSection = false"
         hide-footer
       >
@@ -155,7 +155,7 @@
             optionx = false
           "
         >
-          Dodaj sekcję
+          {{ t('pagebuilder.add_section') }}
         </button>
       </div>
     </div>
@@ -170,6 +170,7 @@ import PagebuilderSection from './PagebuilderSection.vue'
 import DropdownSectionGrid from './DropdownSectionGrid.vue'
 import PagebuilderTemplateSave from './PagebuilderTemplateSave.vue'
 import PagebuilderTemplateLoad from './PagebuilderTemplateLoad.vue'
+import { useI18n } from 'vue-i18n'
 
 export default {
   name: 'MagicoPagebuilder',
@@ -190,17 +191,21 @@ export default {
       drag: false,
       optionx: '',
       comps: [],
-      pasteAvailable:false,
+      pasteAvailable: false,
       modalAddSection: false,
       modalCopy: false,
       pageType: { id: false },
       modalSave: false,
       modalLoad: false,
       descriptionAllegro: false,
-      ownUpdate:false,
+      ownUpdate: false
     }
   },
   props: ['name', 'modelValue', 'showcopy', 'lang'],
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
   mounted: function () {
     if (localStorage.getItem('description_clipboard')) {
       this.descriptionAllegro = true
@@ -234,9 +239,9 @@ export default {
       console.log('nq', newQuestion)
     },
     modelValue: function () {
-      if(this.ownUpdate){
-        this.ownUpdate=false;
-        return;
+      if (this.ownUpdate) {
+        this.ownUpdate = false
+        return
       }
       try {
         this.comps = JSON.parse(this.modelValue)
@@ -254,7 +259,7 @@ export default {
   },
   methods: {
     onChange: function () {
-      this.ownUpdate=true;
+      this.ownUpdate = true
       this.$emit('update:modelValue', JSON.stringify(this.comps))
       this.$emit('change')
     },
@@ -266,17 +271,17 @@ export default {
       this.comps.splice(this.comps.indexOf(item), 1)
       this.onChange()
     },
-    pasteClipboard:function(){
-      const item  =localStorage.getItem('pagebuilder_clipboard');
-      if(!item) return;
-      try{
+    pasteClipboard: function () {
+      const item = localStorage.getItem('pagebuilder_clipboard')
+      if (!item) return
+      try {
         this.comps = JSON.parse(item)
-      }catch(e){
+      } catch (e) {
         alert('Bład wklejenia')
       }
     },
-    copyClipboard:function(){
-      localStorage.setItem('pagebuilder_clipboard', JSON.stringify(this.comps));
+    copyClipboard: function () {
+      localStorage.setItem('pagebuilder_clipboard', JSON.stringify(this.comps))
     },
     addSection: function (it) {
       this.modalAddSection = false