/magento

Free PWA & SPA for Magento

Primary LanguageSCSS


VueFront

CMS Connect App for Magento

Version Chat

Show your ❤️ - give us a ⭐
Help us grow this project to be the best it can be!

VueFront is a VueJS powered CMS agnostic SPA & PWA frontend for your old-fashioned Blog and E-commerce site.

Magento empowers thousands of retailers and brands with the best eCommerce platforms and flexible cloud solutions to rapidly innovate and grow.

CMS Connect App - adds the connection between the Magento CMS and VueFront Web App via a GraphQL API.

What does it do?

This is a Magento module that connects the Magento CMS with the VueFront Web App via a GraphQL API. When installed, you will be provided with a CMS Connect URL that you will add to your VueFront Web App during setup.

Demo

VueFront on Magento

Magento VueFront CMS Connect App

Magento Blog (Megafan Blog Module)

Since Magento does not have a built-in Blog, we use Megafan Blog Module to add blog support automatically. If the Megafan Blog Module is not avalible, VueFront will ignore it.

How to install?

Php version required >= 5.5, <= 7.2 (this limitation will be removed in the future)

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

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
  1. Copy all files from folder dist to the newly created vuefront folder
  2. 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 vuefront folder has a different path of ./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
  1. 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;
}

Support

For support please contact us at Discord

Submit an issue

For submiting an issue, please create one in the issues tab. Remember to provide a detailed explanation of your case and a way to reproduce it.

Enjoy!