# VueFront for OpenCart

OpenCart is an Open Source E-commerce CMS platform. It has an amazing list of feature out-of-the-box and is very easy to develope for.

VueFront is perfect for OpenCart. Actually, most of the E-commerce features that are available in VueFront were inspired by OpenCart. For Blog functionality, VueFront relies on Blog Module Extension by Dreamvention.

# How to connect VueFront to OpenCart?

With VueFront CMS Connect App. The CMS Connect App for OpenCart is an OpenCart extension that fully implements the VueFront QraphQL Data Schema

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

# How to install VueFront for OpenCart

# Step 1: CMS Connect App

1. Download the compiled Extensions from the latest releases.
2. Upload via OpenCart Admin -> Extension Installer
3. Go to Extensions -> Modules -> VueFront and click install
4. Click edit to view copy the CMS Connect URL

# 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

# How to Build & deploy VueFront with OpenCart on hosting.

# 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)

For Nginx 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 (for development)

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.

public_html
├── admin
├── catalog
├── system
└── vuefront // create this folder

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 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]

For Nginx you need to add this code to your nginx.config file right after the index rule

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;
}