![\"vue.js](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/vue_baner.png\" "\\"\\"")
<\/p>\n<\/p>\n
Vue.js to biblioteka JavaScript, kt\u00f3ra umo\u017cliwia software developerom tworzy\u0107 proste aplikacje. Nie jest to jedyne tego typu narz\u0119dzie na rynku, jednak to w\u0142a\u015bnie Vue.js z ka\u017cdym rokiem zyskuje coraz wi\u0119ksz\u0105 popularno\u015b\u0107. Wszystko to za spraw\u0105 szybko\u015bci pisania kodu, prostej sk\u0142adni oraz skalowalno\u015bci aplikacji. Warto zatem przyjrze\u0107 si\u0119 mo\u017cliwo\u015bciom zastosowania tego frameworku. Jedno z nich opisa\u0142em dla Ciebie w tym poradniku. Vue.js jako wtyczka do WordPressa to \u0142atwe do wdro\u017cenia rozwi\u0105zanie, kt\u00f3re bez problemu mo\u017cesz zastosowa\u0107 w kolejnych projektach. Mam nadziej\u0119, \u017ce artyku\u0142 zach\u0119ci Ci\u0119 do dalszego zg\u0142\u0119biania tej tematyki.<\/p>\n
Vue.js zawiera stopniowo adaptowaln\u0105 architektur\u0119, kt\u00f3ra koncentruje si\u0119 na renderowaniu deklaratywnym i tworzeniu komponent\u00f3w. Ide\u0105 stoj\u0105c\u0105 za Vue.js jest ponowne wykorzystanie przygotowanych wcze\u015bniej komponent\u00f3w. Podstawowa biblioteka koncentruje si\u0119 tylko na warstwie widoku. Zaawansowane funkcje wymagane w przypadku z\u0142o\u017conych aplikacji (takich jak routing, zarz\u0105dzanie stanem i narz\u0119dzia do budowania) s\u0105 oferowane za po\u015brednictwem oficjalnie utrzymywanych bibliotek pomocniczych, np. BootstrapVue<\/a>.<\/p>\n Vue.js pozwala na rozszerzenie HTML o atrybuty HTML zwane dyrektywami. Dyrektywy oferuj\u0105 dodatkow\u0105 funkcjonalno\u015b\u0107 dla HTML i s\u0105 dost\u0119pne jako dyrektywy wbudowane lub zdefiniowane przez u\u017cytkownika.<\/p>\n Vue.js to \u015bwietne rozwi\u0105zanie dla WordPressa g\u0142\u00f3wnie za spraw\u0105 \u0142atwo\u015bci integracji i mo\u017cliwo\u015bci prostej adaptacji z dowolnym API, a dzi\u0119ki wyborze takiej konfiguracji masz mo\u017cliwo\u015b\u0107 rozbudowy strony o dodatkow\u0105 funkcjonalno\u015b\u0107.<\/p>\n Poradnik kierowany jest do os\u00f3b, kt\u00f3re chcia\u0142yby rozwin\u0105\u0107 mo\u017cliwo\u015bci WordPressa przy pomocy frameworku Vue.js oraz posiadaj\u0105 podstawowe do\u015bwiadczenie w pracy z frameworkami Javascript: Vue.js. Przydatna mo\u017ce okaza\u0107 si\u0119 r\u00f3wnie\u017c wiedza na temat REST API, Vue CLI i klient\u00f3w FTP, np. darmowym FileZilla.<\/p>\n Dzi\u0119ki niniejszemu poradnikowi nauczysz si\u0119, jak stworzy\u0107 aplikacj\u0119 Vue.js, a nast\u0119pnie zaimplementowa\u0107 j\u0105 jako wtyczk\u0119 do swojej strony opartej o WordPressa. Na potrzeb\u0119 poradnika przygotowa\u0142em nast\u0119puj\u0105ce zadanie: wykonasz wtyczk\u0119 do WordPressa zbudowan\u0105 przy pomocy Vue.js, kt\u00f3ra korzysta z WordPress Rest API do wy\u015bwietlania dziennego menu (7 najbli\u017cszych dni) dla restauracji.<\/p>\n Wejd\u017a do panelu administracyjnego swojego WordPressa i otw\u00f3rz wtyczk\u0119 \u201eCPT UI\u201d<\/strong><\/em> a nast\u0119pnie \u201eAdd New Post Type\u201d<\/strong><\/em> i wpisz podane poni\u017cej warto\u015bci:<\/p>\n Poni\u017cej znajduje si\u0119 sekcja dodatkowych ustawie\u0144. O ile sekcja \u201eAdditional Labels\u201d<\/em><\/strong> jest opcjonalna, o tyle w sekcji ustawie\u0144 upewnij si\u0119, \u017ce w polu \u201eShow in REST API\u201d<\/em><\/strong> wybrana jest warto\u015b\u0107 \u201eTrue\u201d<\/em><\/strong>. Nast\u0119pnie zejd\u017a do kolejnego pola tekstowego \u201eRest API base slug\u201d<\/strong><\/em> i wpisz tutaj cz\u0119\u015b\u0107 URL, do kt\u00f3rego b\u0119dziesz odwo\u0142ywa\u0107 si\u0119 w p\u00f3\u017aniejszym etapie.<\/p>\n Kolejno, poni\u017cej znajduje si\u0119 mo\u017cliwo\u015b\u0107 wybrania ikony jako Menu Icon<\/strong> – mo\u017cesz wybra\u0107 wygl\u0105d ikony na stronie WordPressa<\/a>. Ikona wy\u015bwietla\u0107 si\u0119 b\u0119dzie w sekcji w panelu administratora. Nast\u0119pnie kliknij poni\u017cej przycisk \u201eSave Post Type\u201d<\/em><\/strong> i przejd\u017a do \u201ePola w\u0142asne\u201d<\/strong><\/em>, kt\u00f3re przychodz\u0105 do Ciebie wraz z wtyczk\u0105 Advanced Custom Fields.<\/p>\n Czas zaj\u0105\u0107 si\u0119 opcjami wtyczki. Po wej\u015bciu w \u201ePola w\u0142asne\u201d<\/strong><\/em> w Advanced Custom Fields w panelu administratora WordPressa dodaj now\u0105 grup\u0119 p\u00f3l:<\/p>\n W tytule nowych grup p\u00f3l dodaj Oferty dnia<\/span> (oczywi\u015bcie mo\u017cesz wpisa\u0107 dowoln\u0105 nazw\u0119 grupy, ale ta wydaje si\u0119 odpowiednia dla Twojego zadania). Nast\u0119pnie dodaj nowe pola (przy tworzeniu p\u00f3l zwr\u00f3\u0107 uwag\u0119 na nazw\u0119 pola – do tej warto\u015bci b\u0119dziesz odwo\u0142ywa\u0107 si\u0119 podczas tworzenia aplikacji). Na potrzeby tworzonej aplikacji b\u0119d\u0105 Ci potrzebne nast\u0119puj\u0105ce pola:<\/p>\n Po dodaniu powy\u017cszych p\u00f3l przejd\u017a poni\u017cej na sekcj\u0119 \u201eLokacja”<\/em><\/strong> i ustaw nast\u0119puj\u0105cy warunek:<\/p>\n Pozosta\u0142e elementy ustawie\u0144 pozostaw domy\u015blnie. Nast\u0119pnie przejd\u017a do dodanej pozycji w menu administratora i dodaj pierwsz\u0105 ofert\u0119 dnia. Ja zdecydowa\u0142em si\u0119 na zup\u0119 pomidorow\u0105 oraz kotleta schabowego z frytkami i zestawem sur\u00f3wek, ale licz\u0119 na Twoj\u0105 kreatywno\u015b\u0107.<\/p>\n Aby utworzy\u0107 nowy projekt za pomoc\u0105 Vue CLI, wpisz w terminalu nast\u0119puj\u0105ce polecenie:<\/p>\n Zwr\u00f3\u0107 uwag\u0119, \u017ce nazwa_projektu<\/span> b\u0119dzie nazw\u0105 aplikacji oraz nowo utworzonego folderu.<\/p>\n Nast\u0119pnie wybierz za pomoc\u0105 strza\u0142ek [Vue 2] babel, eslint<\/span>. Babel<\/span> to \u0142a\u0144cuch narz\u0119dzi, u\u017cywany do konwersji kodu ECMAScript 2015 (ES6) na wstecznie kompatybiln\u0105 wersj\u0119 JavaScript w obecnych i starszych przegl\u0105darkach lub \u015brodowiskach. ESLint<\/span> analizuje Tw\u00f3j kod, aby uczyni\u0107 go bardziej sp\u00f3jnym i unikn\u0105\u0107 b\u0142\u0119d\u00f3w. List\u0119 zasad dotycz\u0105cych kod\u00f3w weryfikowanych przez ESLint<\/span> znajdziesz tutaj<\/a>.<\/p>\n Po prawid\u0142owym zako\u0144czeniu instalacji otrzymasz nast\u0119puj\u0105cy komunikat:<\/p>\n Przejd\u017a do wskazanego przez Vue CLI folderu (pami\u0119taj, \u017ce folder utworzony zostanie domy\u015blnie w lokalizacji, w kt\u00f3rej aktualnie znajdujesz si\u0119 w terminalu).<\/p>\n Wykorzystanie Vue.js jako wtyczki do WordPressa to ciekawe rozwi\u0105zanie do zastosowania przy kolejnych nowych projektach. Pozwoli Ci ono znacz\u0105co przyspieszy\u0107 prac\u0119 – gotow\u0105 wtyczk\u0119 mo\u017cesz z \u0142atwo\u015bci\u0105 przenosi\u0107 pomi\u0119dzy instancjami tego CMSa.<\/p>\n W dhosting.pl lubimy rozwi\u0105zania, kt\u00f3re przyspieszaj\u0105 i u\u0142atwiaj\u0105 prac\u0119, dlatego te\u017c stworzyli\u015bmy Elastyczny Web Hosting<\/strong> – unikatow\u0105 us\u0142ug\u0119, dzi\u0119ki kt\u00f3rej nie musisz po\u015bwi\u0119ca\u0107 czasu na monitorowanie zasob\u00f3w niezb\u0119dnych dla Twoich stron WWW. \u00a0Otrzymasz wysokie parametry gwarantowane, czyli 1 GHz CPU, 2 GB RAM oraz 50 GB NVMe,<\/strong> a je\u015bli w kt\u00f3rymkolwiek momencie Twoje witryny b\u0119d\u0105 potrzebowa\u0107 wi\u0119cej, opcja elastycznego skalowania automatycznie, bez konieczno\u015bci kontaktu z supportem, przydzieli Ci dodatkowe zasoby. Zapewni\u0105 one p\u0142ynno\u015b\u0107 w dzia\u0142aniu wszystkich Twoich stron niezale\u017cnie od ich obci\u0105\u017cenia.<\/p>\n WYPR\u00d3BUJ HOSTING<\/strong><\/a><\/p>\n<\/div>\n Usu\u0144 domy\u015blnie utworzony komponent HelloWorld.vue<\/span> oraz usu\u0144 jego importowanie w pliku App.vue<\/span> wraz z jego wskazaniem w sekcji komponent\u00f3w. Nast\u0119pnie w folderze g\u0142\u00f3wnym swojej aplikacji utw\u00f3rz plik o nazwie vue.config.js<\/span> i wklej do niego nast\u0119puj\u0105cy kod:<\/p>\n Dzi\u0119ki niemu podczas kompilowania aplikacji zniknie hash w nazwie plik\u00f3w, kt\u00f3re zostan\u0105 skompilowane. Hashowanie plik\u00f3w nie jest potrzebne do Twojego projektu, poniewa\u017c nie b\u0119dziesz korzysta\u0107 z domy\u015blnie tworzonego przy kompilacji pliku index.html<\/span>. Wi\u0119cej mo\u017cliwo\u015bci konfiguracyjnych znajdziesz w oficjalnej dokumentacji Vue CLI<\/a>.<\/p>\n Na tym etapie utw\u00f3rz w folderze komponent\u00f3w dwa pliki: OfferBox.vue<\/span> oraz SingleOffer.vue<\/span>. Twoja struktura w folderze g\u0142\u00f3wnym powinna wygl\u0105da\u0107 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n Teraz dodaj poni\u017cszy kod do komponentu g\u0142\u00f3wnego App.vue<\/span>. Szablon pliku .vue<\/span> sk\u0142ada si\u0119 z trzech element\u00f3w:<\/p>\n Dodaj nast\u0119puj\u0105cy kod do komponentu OfferBox.vue<\/span>:<\/p>\n Pami\u0119taj, aby zmieni\u0107 w metodzie\u00a0fetchOffer()<\/span> link na swoj\u0105 domen\u0119 z zainstalowanym WordPressem.<\/p>\n<\/div>\n Dodaj nast\u0119puj\u0105cy kod do komponentu SingleOffer.vue<\/span>: Na tym etapie uruchom aplikacj\u0119 i sprawd\u017a po\u0142\u0105czenie z WordPress Rest API. W terminalu wpisz polecenie:<\/p>\n Za pomoc\u0105 tej komendy uruchomisz lokalny serwer deweloperski. B\u0119dzie on dost\u0119pny pod wskazanym na terminalu adresem. Otw\u00f3rz jeden z dw\u00f3ch wy\u015bwietlanych adres\u00f3w za pomoc\u0105 crtl + lpm<\/span> i przejd\u017a do przegl\u0105darki.<\/p>\n Je\u017celi dodana oferta znajduje si\u0119 na stronie, to znaczy, \u017ce wszystko dzia\u0142a prawid\u0142owo i mo\u017cesz przej\u015b\u0107 do kompilacji swojej aplikacji i przygotowania jej jako wtyczki do importu na serwer.<\/p>\n<\/div>\n Do kompilacji u\u017cyj polecenia w terminalu:<\/p>\n Pliki umieszczone zostan\u0105 domy\u015blnie w folderze dist<\/span> – w g\u0142\u00f3wnym folderze aplikacji. W g\u0142\u00f3wnej lokalizacji aplikacji utw\u00f3rz nowy folder i nazwij go rest-auto-menu<\/span>. W \u015brodku utw\u00f3rz plik .php<\/span>, kt\u00f3ry b\u0119dzie to\u017csamy z nazw\u0105 wtyczki – rest-auto-menu.php<\/span>. Do pliku dodaj nast\u0119puj\u0105cy kod:<\/p>\n Zwr\u00f3\u0107 uwag\u0119 na ostatni\u0105 funkcj\u0119 add_shortcode()<\/span>. Pierwsza cz\u0119\u015b\u0107 funkcji odpowiada za nazw\u0119 skr\u00f3tu, dzi\u0119ki kt\u00f3remu umie\u015bcisz aplikacj\u0119 w wybranym przez siebie miejscu na WordPressie. W powy\u017cszym przyk\u0142adzie b\u0119dzie to [vue_automenu]<\/span>\u00a0(nazwa ta mo\u017ce by\u0107 dowolna). Wi\u0119cej o tej funkcji przeczytasz tutaj<\/a>. Nast\u0119pnie do wcze\u015bniej utworzonego folderu rest-auto-menu<\/span> dodaj foldery dist<\/span>. Struktura folderu powinna wygl\u0105da\u0107 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n Ca\u0142y folder rest-auto-menu<\/span> wgraj za pomoc\u0105, np. FileZilla do folderu wp-content\/plugins<\/span>, nast\u0119pnie aktywuj swoj\u0105 wtyczk\u0119. Kiedy wtyczk\u0119 masz ju\u017c gotow\u0105, mo\u017cesz doda\u0107 j\u0105 za pomoc\u0105, np. Gutenberga:<\/p>\n<\/span>Dlaczego warto wybra\u0107 Vue.js jako wtyczk\u0119 do WordPressa?<\/span><\/h2>\n
\r\n\t![\"opieka](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2025\/01\/baner-opieka.png\")
\r\n<\/a>\r\n
\r\n
<\/div><\/span>Do kogo kierowany jest ten poradnik?<\/span><\/h2>\n
<\/span>Czego potrzebujesz?<\/span><\/h2>\n
\n
<\/span>Czego si\u0119 nauczysz?<\/span><\/h2>\n
<\/span>Krok 1 – Konfiguracja CPT UI<\/span><\/h2>\n
![\"Dodawanie](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/CPT-UI-Add-post-300x126.png\" "\\"\\"")
<\/a><\/p>\n![\"szczeg\u00f3\u0142owe](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/CPT-UI-Settings-300x187.png\" "\\"\\"")
<\/a><\/p>\n<\/span>Krok 2 – Konfiguracja Advanced Custom Fields<\/span><\/h2>\n
![\"dodawanie](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/ACF-new-type-300x110.png\" "\\"\\"")
<\/a><\/p>\n\n
![\"Warunek](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/ACF-Warunek-300x46.png\" "\\"\\"")
<\/a><\/p>\n<\/span>Krok 3 – utworzenie nowego projektu za pomoc\u0105 Vue CLI<\/span><\/h2>\n
vue create nazwa_projektu<\/code><\/pre>\n![\"widok](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/vue2.png\" "\\"\\"")
<\/a><\/p>\n![\"komunikat](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/prawidlowa_instalacja.png\" "\\"\\"")
<\/a><\/p>\n\n<\/span>Krok 4 – tworzenie nowych komponent\u00f3w i \u015brodowiska produkcyjnego<\/span><\/h2>\n
module.exports = {\n filenameHashing: false,\n}\n<\/code><\/pre>\n![\"wygl\u0105d](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/struktura-vue.png\" "\\"\\"")
<\/a><\/p>\n\n
<template>\n <div id="app">\n <offer-box \/>\n <\/div>\n<\/template>\n<\/code>\n<script>\nimport OfferBox from '.\/components\/OfferBox.vue'\n \nexport default {\n name: 'App',\n components: {\n OfferBox\n }\n}\n<\/script>\n<!-- <style scoped> aby ograniczy\u0107 wy\u015bwietlanie CSS tylko dla tego komponentu -->\n<\/code>\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500&display=swap');\n#app {\n font-family: Roboto;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-size: 16px;\n margin-top: 60px;\n}\nh3{\n margin: 5px 0;\n}\np {\n margin: 5px 0;\n}\n \n<\/style><\/code><\/pre>\n\n
\n<template>\n <div class="container" v-if="menu">\n <div class="card" v-if="isLoading">Pobieram ofert\u0119<\/div>\n <div class="card" v-for="item in checkValidDate" :key="item.id">\n <single-offer\n :date="item.acf.date"\n :soup="item.acf.soup"\n :main="item.acf.main"\n :price="item.acf.price"\n \/>\n <\/div>\n <\/div>\n<\/template>\n<\/code>\n<script>\nimport SingleOffer from ".\/SingleOffer.vue";\nexport default {\n components: { SingleOffer },\n data() {\n return {\n menu: null,\n isLoading: false,\n };\n },\n \/\/ wywo\u0142anie funkcji fetchOffer() po zamontowaniu komponentu\n mounted() {\n this.fetchOffer();\n },\n methods: {\n \/\/ pobranie danych z WordPress Rest API z u\u017cyciem ACF\n async fetchOffer() {\n this.isLoading = true;\n await fetch("https:\/\/twoja-domena.pl\/wp-json\/wp\/v2\/oferty?_fields=acf")\n .then((response) => response.json())\n .then((data) => (this.menu = data));\n this.isLoading = false;\n },\n \/\/ funkcja na potrzeb\u0119 sprawdzenia r\u00f3\u017cnicy w dniach\n checkDayDiffrence(futureDate){\n let currentDay = new Date()\n let futureDay = new Date(futureDate)\n const oneDay = 1000*60*60*24\n const diffrence = futureDay.getTime()- currentDay.getTime();\n const diffrenceDays = Math.round(diffrence \/ oneDay);\n return diffrenceDays\n }\n },\n computed: {\n\n \/\/ sprawdzamy, czy r\u00f3znica mi\u0119dzy datami znajduje si\u0119 w zakresie od 7 dni do -1 (zastosowanie -1 pozwala na wy\u015bwietlanie oferty z bie\u017c\u0105cego dnia)\n checkValidDate(){\n let filteredMenu = this.menu.filter(item => this.checkDayDiffrence(item.acf.date) <= 7 && this.checkDayDiffrence(item.acf.date) >= -1 )\n return filteredMenu\n }\n }\n};\n<\/script>\n<\/code>\n<style>\n.container {\n display: flex;\n align-content: center;\n align-items: center;\n flex-direction: column;\n justify-content: space-around;\n}\n.card {\n color: inherit;\n padding: 20px;\n text-align: center;\n border-radius: 10px;\n margin-bottom: 2em;\n \n}\n<\/style><\/code><\/pre>\n
\n(Komponent SingleOffer.vue<\/span> otrzymuje dane od nadrz\u0119dnego komponentu oraz zwraca dat\u0119 poprawn\u0105 do wy\u015bwietlenia.)<\/p>\n<template>\n <div>\n <div class="header">Oferta na dzie\u0144: {{parseDate.day }}.{{parseDate.month + 1}}.{{parseDate.year}}<\/div>\n <div class="single-box" >\n <h3 class="title">Zupa<\/h3>\n <p>{{ soup }}<\/p>\n <h3 class="title">Drugie danie<\/h3>\n {{ main }}\n <h3 class="title">Cena<\/h3>\n <p class="price">{{ price }} PLN<\/p>\n <\/div>\n <\/div>\n<\/template>\n<\/code>\n<script>\nexport default {\n props: {\n soup: String,\n main: String,\n price: String,\n date: String,\n },\n computed: {\n \/\/ zwraca poprawnie sformatowan\u0105 date do wy\u015bwietlenia - funkcja natywna \tgetMonth() zwraca warto\u015b\u0107 od 0 do 11 st\u0105d przy wy\u015bwietlaniu dodaj do zwr\u00f3conej przez funkcj\u0119 warto\u015bci 1\n parseDate(){\n let currentDay = new Date(this.date)\n return {day: currentDay.getDate(), month: currentDay.getMonth(), year: currentDay.getFullYear()}\n }\n }\n};\n<\/script>\n<\/code>\n<style scoped>\n.single-box {\n width: 400px;\n height: 350px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n font-size: 1.2em;\n}\n.header {\n font-size: 1.5em;\n background-color: #c94141;\n color: aliceblue;\n padding: 20px;\n margin-bottom: 20px;\n}\n.price {\n font-size: 1.5em;\n}\n<\/style><\/code><\/pre>\nnpm run serve<\/code><\/pre>\n\n<\/span>Krok 5 – Kompilacja aplikacji i tworzenie wtyczki Vue.js<\/span><\/h2>\n
npm run build<\/code><\/pre>\n<?php\n\/**\n * Plugin Name: Nazwa wtyczki\n * Plugin URI: https:\/\/dhosting.pl\n * Description: Automatyczne menu dla restauracji\n * Version: 1.0.0\n * Author: Jan Kowalski\n * Author URI: https:\/\/dhosting.pl\n * \n * Pami\u0119taj, aby zmieni\u0107 nazw\u0119 folderu, w kt\u00f3rym znajduje si\u0119 ten plik, i tego pliku, tak aby odpowiada\u0142a nazwie Twojej wtyczki. Nazwy musz\u0105 by\u0107 takie same, aby WordPress wiedzia\u0142, gdzie szuka\u0107.\n *\/\n \nfunction load_vuescripts() {\n wp_enqueue_style( 'vue_wp_styles', plugin_dir_url( __FILE__ ) . 'dist\/css\/app.css' );\n wp_register_script( 'vue_wp_compiled', plugin_dir_url( __FILE__ ) . 'dist\/js\/app.js', true );\n wp_register_script( 'vue_wp_dependencies', plugin_dir_url( __FILE__ ) . 'dist\/js\/chunk-vendors.js', true );\n}\n \nadd_action( 'wp_enqueue_scripts', 'load_vuescripts' );\n \nfunction attach_vue() {\n wp_enqueue_script( 'vue_wp_compiled' );\n wp_enqueue_script( 'vue_wp_dependencies' );\n \n return "<div id='app'><\/div>";\n}\n \nadd_shortcode( 'rest_auto_menu', 'attach_vue' );\n?>\n<\/code><\/pre>\n![\"wygl\u0105d](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/struktura-folderow-plugin.png\" "\\"\\"")
<\/a><\/p>\n
![\"kod](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/shortcode-guttenberg-300x60.png\" "\\"\\"")
<\/a><\/p>\n![\"wygl\u0105d](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/prawidlowe-wyswietlanie.png\" "\\"\\"")
<\/a><\/p>\n![\"Roman](\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2021\/10\/mikolaj-grendzisz-kopia.jpg\" "\\"\\"")
<\/div>\n