# VueFront for Magento

Magento is an open-source e-commerce platform written in PHP. It is one of the most popular open e-commerce systems in the network and powers some of the top players in the E-commerce business.

VueFront has most of the features that Magento brings and for Blog functionality, VueFront relies on Blog Module Extension by Megafan.

# How to connect VueFront to Magento?

With VueFront CMS Connect App for Magento. It is a Magento extension that fully implements the VueFront QraphQL Data Schema

For Blog support, you simply need to have Blog Module by Megafan preinstalled and activated.

# How to install VueFront for Magento

# Step 1: CMS Connect App

# 1. Quick Install via composer (recommended)

We recommend you to install VueFront module via composer. It is easy to install, update and maintaince.

Run the following command in Magento 2 root folder.

# 1.1 Install

composer require vuefront/module-vuefront
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

# 1.2 Upgrade

composer update vuefront/module-vuefront
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Run compile if your store in Product mode:

php bin/magento setup:di:compile

# 2. Install vie copy/paste

If you don't want to install via composer, you can use this way.

• Download the latest version here
• Extract master.zip file to app/code/Vuefront/Vuefront ; You should create a folder path app/code/Vuefront/Vuefront if not exist.
• Go to Magento root folder and run upgrade command line to install Vuefront:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

# Step 2: Build & Deploy Web App

Once you have installed the extension and obtained the CMS Connect URL, you can now proceed to the next step of installing the web app on your local computer.

Install VueFront Web App

# Deploy VueFront Web App to Apache hosting (static website)

# via VueFront Deploy service (recommended)

1. Install the VueFront CMS Connect App from this repo.
2. Log in or register an account with VueFront.com
3. Build your first Web App
4. Activate the new Frontend Web App (only avalible for Apache servers)

# via ftp manually

1. Install the VueFront CMS Connect App from this repo.
2. Log in or register an account with VueFront.com
3. Copy the CMS Connect URL
4. Via Ftp create a new folder vuefront in the root of your OpenCart site on your hosting.
5. Via command line build your VueFront Web App (read more)

yarn create vuefront-app
# When promote, provide the CMS Connect URL, which you coppied at step 3.
yarn generate

6. Copy all files from folder dist to the newly created vuefront folder
7. modify you .htaccess file by adding after #RewriteBase /magento/ rule the following rules:

# VueFront scripts, styles and images
RewriteCond %{REQUEST_URI} .*(_nuxt)
RewriteCond %{REQUEST_URI} !.*/vuefront/_nuxt
RewriteRule ^([^?]*) vuefront/$1
# VueFront sw.js
RewriteCond %{REQUEST_URI} .*(sw.js)
RewriteCond %{REQUEST_URI} !.*/vuefront/sw.js
RewriteRule ^([^?]*) vuefront/$1
# VueFront favicon.ico
RewriteCond %{REQUEST_URI} .*(favicon.ico)
RewriteCond %{REQUEST_URI} !.*/vuefront/favicon.ico
RewriteRule ^([^?]*) vuefront/$1
# VueFront pages
# VueFront home page
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
RewriteCond %{QUERY_STRING} !.*(rest_route)
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/index.html -f
RewriteRule ^$ vuefront/index.html [L]
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
RewriteCond %{QUERY_STRING} !.*(rest_route)
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/index.html !-f
RewriteRule ^$ vuefront/200.html [L]
# VueFront page if exists html file
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
RewriteCond %{QUERY_STRING} !.*(rest_route)
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/$1.html -f
RewriteRule ^([^?]*) vuefront/$1.html [L,QSA]
# VueFront page if not exists html file
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
RewriteCond %{QUERY_STRING} !.*(rest_route)
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/$1.html !-f
RewriteRule ^([^?]*) vuefront/200.html [L,QSA]

# Deploy VueFront Web App to Nginx hosting (static website)

Same as for apache only you are required to add the server configurations yourself and the folder path for VueFront is ./pub/vuefront:

# via VueFront Deploy service (recommended)

1. Install the VueFront CMS Connect App from this repo.
2. Log in or register an account with VueFront.com
3. Build your first Web App
4. Now you need to add this code to your nginx.config file right after the index directive

location ~ ^((?!image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/).)*$ {
   try_files /vuefront/$uri /vuefront/$uri "/vuefront${uri}index.html" /vuefront$uri.html /vuefront/200.html;
}

# via ftp manually

1. Install the VueFront CMS Connect App from this repo.
2. Log in or register an account with VueFront.com
3. Copy the CMS Connect URL
4. Via Ftp create a new folder ./pub/vuefront of your Magento site on your hosting.
5. Via the command line build your VueFront Web App (read more)

yarn create vuefront-app
# When promote, provide the CMS Connect URL, which you coppied at step 3.
yarn generate

6. Now you need to add this code to your nginx.config file right after the index directive

location ~ ^((?!image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/).)*$ {
   try_files /vuefront/$uri /vuefront/$uri "/vuefront${uri}index.html" /vuefront$uri.html /vuefront/200.html;
}