# Vue Storefront 2 integration with Magento2

Repository is a starter Vue Storefront 2 application integrated with Magento2.

Requirements:

• NodeJS >=14 <=16
• Yarn
• Magento2

Where to start?

To get started, see the following guides:

• Introduction to learn what is Vue Storefront

• Configuring Magento2 to setup your Magento2 store

• Configuring VueStorefront 2 to install and setup new Vue Storefront project for Magento2

Local dev setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

Multistore local dev setup

1. Install docker and docker-compose on your local machine.

2. Add your hosts to the /etc/hosts file:

   127.0.0.1       myshop1.local myshop2.local
   

3. Set API_BASE_URL=/api/ env variable in the .env file.

4. If you're using Linux: uncomment lines 10 and 11 in the docker-compose.yml file.

5. Add your hosts to the server_name option inside the docker/nginx/nginx.conf file:

   server_name localhost myshop1.local myshop2.local;
   

6. Because this is a local dev setup and nginx is configured to use an unsecured HTTP connection, the middleware.config.js file needs to be updated to disable the secure cookie option. To achieve this, you can modify the cookiesDefaultOpts object in the magento integration section of the middleware.config.js file as follows:

   module.exports = {
     integrations: {
       magento: {
         configuration: {
           cookiesDefaultOpts: {
             secure: process.env.VSF_COOKIE_SECURE || false,
           }
         }
       }
     }
   };

7. Start docker-compose daemon:

   $ docker-compose up -d

8. Start storefront dev server:

   $ yarn dev

Resources

• Vue Storefront Documentation
• Vue Storefront Enterprise Documentation
• Magento2 Integration Documentation
• API References
• Community Chat

Support

If you have any questions about this integration we will be happy to answer them on Magento2 channel on our Discord.