PHPackages                             vuefront/module-vuefront - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [API Development](/categories/api)
4. /
5. vuefront/module-vuefront

ActiveMagento2-module[API Development](/categories/api)

vuefront/module-vuefront
========================

Vuefront api for magento2

0.3.1(4y ago)39989[28 PRs](https://github.com/vuefront/magento/pulls)OSL-3.0SCSS

Since Aug 9Pushed 3y ago2 watchersCompare

[ Source](https://github.com/vuefront/magento)[ Packagist](https://packagist.org/packages/vuefront/module-vuefront)[ RSS](/packages/vuefront-module-vuefront/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (4)Dependencies (3)Versions (33)Used By (0)

 [ ![](https://raw.githubusercontent.com/vuefront/vuefront-docs/master/.vuepress/public/img/github/vuefront-magento.jpg) ](https://vuefront.com)

VueFront
========

[](#vuefront)

### CMS Connect App for Magento

[](#cms-connect-app-for-magento)

 [![Version](https://camo.githubusercontent.com/6c546ddf637b8172823c895707a0e1044f1f90e2a3db73b24424a5014fb53ae6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f70726963652d465245452d3030393866372e737667)](https://github.com/vuefront/vuefront) [![](https://camo.githubusercontent.com/4dfe66cb177f6c6cdb1154f5f37ff0baf44bd3e28aeeb91aea819fe686ae9de0/68747470733a2f2f706f7365722e707567782e6f72672f76756566726f6e742f6d6f64756c652d76756566726f6e742f762f737461626c65)](https://packagist.org/packages/vuefront/module-vuefront) [![Chat](https://camo.githubusercontent.com/097799c2388066bb862ea1075c6d48a0f651b5768548c0e7f8fe367a37b43961/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636861742d6f6e253230646973636f72642d3732383964612e737667)](https://discord.gg/C9vcTCQ)

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

**VueFront** is a [VueJS powered](//vuejs.org) 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?
================

[](#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](https://vuefront.com/guide/setup.html).

Demo
----

[](#demo)

[VueFront on Magento](https://magento.vuefront.com/)

[![Magento VueFront CMS Connect App](https://camo.githubusercontent.com/18816ddee9c23c81dbb85025fd7aca6e1b864d72afdec448e0a07128b6c3536b/687474703a2f2f6a6f78692e6e65742f4c6d476577595a697735566544412e6a7067)](https://camo.githubusercontent.com/18816ddee9c23c81dbb85025fd7aca6e1b864d72afdec448e0a07128b6c3536b/687474703a2f2f6a6f78692e6e65742f4c6d476577595a697735566544412e6a7067)

### Magento Blog (Megafan Blog Module)

[](#magento-blog-megafan-blog-module)

Since Magento does not have a built-in Blog, we use [Megafan Blog Module](https://marketplace.magento.com/magefan-module-blog.html) to add blog support automatically. If the Megafan Blog Module is not avalible, VueFront will ignore it.

How to install?
---------------

[](#how-to-install)

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

### 1. Quick Install via composer (recommended)

[](#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

[](#11-install)

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

```

#### 1.2 Upgrade

[](#12-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

[](#2-install-vie-copypaste)

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

- Download [the latest version here](https://github.com/vuefront/magento/archive/master.zip)
- 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)
----------------------------------------------------------

[](#deploy-vuefront-web-app-to-apache-hosting-static-website)

### via VueFront Deploy service (recommended)

[](#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

[](#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](https://vuefront.com/guide/setup.html))

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

[](#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)

[](#via-vuefront-deploy-service-recommended-1)

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

[](#via-ftp-manually-1)

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](https://vuefront.com/guide/setup.html))

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

```

Support
-------

[](#support)

For support please contact us at [Discord](https://discord.gg/C9vcTCQ)

Submit an issue
---------------

[](#submit-an-issue)

For submiting an issue, please create one in the [issues tab](https://github.com/vuefront/vuefront/issues). Remember to provide a detailed explanation of your case and a way to reproduce it.

Enjoy!

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 81.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~328 days

Total

4

Last Release

1484d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/37965a2f1e8286e762f9b8dd8c58d6e734d36c8be3dee28bbac07699dd922563?d=identicon)[vuefront](/maintainers/vuefront)

---

Top Contributors

[![alexandrdrvn](https://avatars.githubusercontent.com/u/24545006?v=4)](https://github.com/alexandrdrvn "alexandrdrvn (80 commits)")[![dmitriyzhuk](https://avatars.githubusercontent.com/u/24543836?v=4)](https://github.com/dmitriyzhuk "dmitriyzhuk (14 commits)")[![krasaler](https://avatars.githubusercontent.com/u/9199108?v=4)](https://github.com/krasaler "krasaler (4 commits)")

---

Tags

frontendfrontend-webgraphql-apimagentomagento-extensionmagento-modulemagento-pwamagento-spamagento2megafan-blogpwapwa-magentospaspa-magentovuefrontvuefront-web

### Embed Badge

![Health badge](/badges/vuefront-module-vuefront/health.svg)

```
[![Health](https://phpackages.com/badges/vuefront-module-vuefront/health.svg)](https://phpackages.com/packages/vuefront-module-vuefront)
```

###  Alternatives

[nuwave/lighthouse

A framework for serving GraphQL from Laravel

3.5k10.7M93](/packages/nuwave-lighthouse)[thecodingmachine/graphqlite

Write your GraphQL queries in simple to write controllers (using webonyx/graphql-php).

5723.1M30](/packages/thecodingmachine-graphqlite)[wp-graphql/wp-graphql

GraphQL API for WordPress

3.8k391.7k19](/packages/wp-graphql-wp-graphql)[overblog/graphql-bundle

This bundle provides tools to build a GraphQL server in your Symfony App.

8027.9M28](/packages/overblog-graphql-bundle)[wheelpros/fitment-platform-api

Magento 2 (Open Source)

12.1k1.2k](/packages/wheelpros-fitment-platform-api)[aimeos/ai-admin-graphql

Aimeos Admin GraphQL API extension

944100.0k4](/packages/aimeos-ai-admin-graphql)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)