{"id":7494,"date":"2021-11-20T11:00:53","date_gmt":"2021-11-20T11:00:53","guid":{"rendered":"https:\/\/www.bay20.com\/?p=7494"},"modified":"2025-05-21T15:28:27","modified_gmt":"2025-05-21T09:43:27","slug":"anleitung-zur-installation-vuestorefront-und-verbindung-mit-deinem-shopware-6-store","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/anleitung-zur-installation-vuestorefront-und-verbindung-mit-deinem-shopware-6-store\/","title":{"rendered":"Wie installiert man VueStoreFront und verbindet es mit dem Shopware 6 Store?"},"content":{"rendered":"\n<p>Die Installation von VueStoreFront und die Verbindung mit Shopware 6 ist ziemlich einfach und unkompliziert.<\/p>\n\n\n\n<p>Zun\u00e4chst m\u00fcssen Sie Shopware 6 installieren. Hierf\u00fcr k\u00f6nnen Sie einen anderen Blogbeitrag lesen, der Sie bei der <a href=\"https:\/\/www.bay20.com\/de\/shopware-6-installation-mit-docker-auf-mac-os\/\" target=\"_blank\" rel=\"noreferrer noopener\">Installation von Shopware 6 mit Docker<\/a> anleitet.<\/p>\n\n\n\n<p>Beginnen wir nun mit der Installation von VueStoreFront.<\/p>\n\n\n\n<p><strong>Schritt 1: <\/strong>Installieren Sie node und yarn (ich verwende node v14.17.1 und yarn 1.22.10)<\/p>\n\n\n\n<p><strong>Schritt 2: <\/strong>Sobald die Systemvoraussetzungen erf\u00fcllt sind, m\u00fcssen Sie das Shopware PWA Plugin in Ihrem Shopware Setup installieren. Sie k\u00f6nnen den folgenden Composer-Befehl verwenden, um das Plugin zu installieren.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>composer require shopware-pwa\/shopware-pwa<\/code><\/pre>\n\n\n\n<p><strong>Schritt 3: <\/strong>Sobald das Shopware PWA Plugin installiert ist, f\u00fchren Sie den folgenden Befehl aus, um das Plugin zu aktualisieren, zu installieren und zu aktivieren.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bin\/console plugin:refresh &amp;&amp; bin\/console plugin:install --activate SwagShopwarePwa<\/code><\/pre>\n\n\n\n<p><strong>Schritt 4:<\/strong> Wechseln wir nun wieder in das Shopware PWA-Verzeichnis und f\u00fchren den folgenden Befehl aus. Nachdem wir diesen Befehl ausgef\u00fchrt haben, m\u00fcssen wir Informationen wie API-Schl\u00fcssel, Admin und Passwort angeben<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx @shopware-pwa\/cli@canary init<\/code><\/pre>\n\n\n\n<p><strong>Schritt 5: <\/strong>Sobald der Befehl abgeschlossen ist, f\u00fchren Sie den folgenden Befehl aus, um das PWA-Setup f\u00fcr Shopware zu erstellen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn dev<\/code><\/pre>\n\n\n\n<p>Sobald alles funktioniert, erhalten Sie die Details wie im untenstehenden Screenshot. Sie k\u00f6nnen die Abh\u00f6r-URL kopieren und sie im Browser \u00f6ffnen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"409\" height=\"177\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-29-at-12.45.29-PM.png\" alt=\"install VueStoreFront and connect\" class=\"wp-image-8875\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-29-at-12.45.29-PM.png 409w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/06\/Screenshot-2021-06-29-at-12.45.29-PM-300x130.png 300w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/figure>\n\n\n\n<p><strong>Bitte kontaktieren Sie uns unter <strong><a href=\"mailto:manish@bay20.com\">manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter <strong><a href=\"https:\/\/api.whatsapp.com\/send?phone=+918800519180&amp;text=Hi,%20I%20contacted%20you%20through%20your%20website.\" target=\"_blank\" rel=\"noreferrer noopener\">+91-8800519180<\/a><\/strong> an, wenn Sie Unterst\u00fctzung f\u00fcr <strong><a href=\"https:\/\/www.bay20.com\/de\/shopware-entwicklungsunternehmen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Shopware 6<\/a><\/strong> ben\u00f6tigen. Sie k\u00f6nnen auch die <strong><a href=\"https:\/\/www.bay20.com\/de\/shopware-entwicklungsunternehmen\/\">Shopware<strong>-Entwicklungsseite<\/strong><\/a><\/strong> besuchen, um die von uns angebotenen Dienstleistungen zu pr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Installation von VueStoreFront und die Verbindung mit Shopware 6 ist ziemlich einfach und unkompliziert. Zun\u00e4chst m\u00fcssen Sie Shopware 6 installieren. Hierf\u00fcr k\u00f6nnen Sie einen anderen Blogbeitrag lesen, der Sie bei der Installation von Shopware 6 mit Docker anleitet. Beginnen wir nun mit der Installation von VueStoreFront. Schritt 1: Installieren Sie node und yarn (ich [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":9384,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86,78,115,91],"tags":[],"class_list":["post-7494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pwa","category-shopware","category-shopware-6","category-shopware-6-anleitungen"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/7494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=7494"}],"version-history":[{"count":10,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/7494\/revisions"}],"predecessor-version":[{"id":17251,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/7494\/revisions\/17251"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/9384"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=7494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=7494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=7494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}