How to install VueStoreFront and connect with your Shopware 6 Store?

Installing the VueStoreFront and connecting it with shopware 6 is pretty simple and straightforward.

First, you need to install shopware 6. For this, you can go through another blog post that will guide you to install shopware 6 using docker.

Now let’s start installing VueStoreFront.

Step 1: Install node and yarn( I am using node v14.17.1 and yarn 1.22.10)

Step 2: Once the system requirement is met you need to install the shopware PWA plugin into your shopware setup. You can use the below composer command to install the plugin.

composer require shopware-pwa/shopware-pwa

Step 3: Once the shopware PWA plugin is installed then run the below command to refresh, install and activate the plugin.

bin/console plugin:refresh && bin/console plugin:install --activate SwagShopwarePwa

Step 4: Now let’s get back to the shopware PWA directory and run the below command. After running this command we need to provide information like API key, admin and password

npx @shopware-pwa/cli@canary init

Step 5: Once the command is completed run the below command to generate PWA setup for shopware.

yarn dev

Once everything works fine then you will get the detail like the below screenshot and you can copy the listening URL and open it in the browser.