vuefront/magento

Free PWA & SPA for Magento

VueFront

Vue powered CMS agnostic frontend framework for your old-fashioned Blog and Ecommerce site.

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

Demo

VueFront on Wordpress

VueFront on OpenCart

VueFront on Magento

VueFront on PrestaShop

What can I do with VueFront?

Easily turn your Wordpress, OpenCart, Magento, PrestaShop, Shopify or any other blog/store CMS into an SPA and PWA with Vue.js in less then 5 minutes.

VueFront Tech-stack:

• SPA
• PWA
• AMP
• GraphQL + Apollo
• VueJS + Nuxt
• Atomic Design
• JAMstack

Who can use VueFront?

You or your clients with a site on an old-fashiond CMS. If you want to try new technology, outrun your competition and just provide a better user experience, but not ready to invest thousands of dollars, VueFront is for you.

• It uses the latest tech stack.
• It's free.
• It's easy to setup, test and run.

It works out-of-the-box:

• You get a shiny new Web APP.
• You get to keep your current CMS admin panel.
• You can always switch back to your old site.

Give it a try, what do you have to lose?

How do I get started? (development)

1. Install VueFront CMS Connect App on your site and copy the CMS Connect URL.
2. Install VueFront app. (requires node.js >= 8, git, and yarn)

# Create VueFront app. replace <project-name> with vuefront
yarn create vuefront-app <project-name>
# OR npx create-vuefront-app <project-name>

yarn dev

Switch to production

1. build your App

# build the app
yarn build

2. Copy the contents of your app from /dist to your root folder of your CMS where it is hosted.

3. Configure your hosting to load index.html first. This can be a bit tricky.

For OpenCart CMS you can use this:

• Apache

# for VueFront to work you need to load index.html before any other index file
DirectoryIndex index.html index.php

• Nginx

# for VueFront to work you need to load index.html before any other index file
index index.html index.php;

# when visiting any other url, it should forward to the root index.html file
location / {
    try_files $uri $uri/ /index.html;
}

magento's Issues

webonyx/graphql-php version

Please set webonyx/graphql-php 0.12.6 to webonyx/graphql-php 0.13.2 to be compatible with Magento 2.4.2

Problem 1
- Root composer.json requires vuefront/module-vuefront ^0.2.0 -> satisfiable by vuefront/module-vuefront[0.2.0].
- vuefront/module-vuefront 0.2.0 requires webonyx/graphql-php 0.12.6 -> found webonyx/graphql-php[v0.12.6] but the package is fixed to v0.13.9 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.

error

WARN [Network error]: ServerParseError: Unexpected token < in JSON at position 0

error magento 2.3.4

sudo bin/magento setup:di:compile
Compilation was started.
Repositories code generation... 1/7 [===>------------------] 14% 1 sec 68.5 MiB
In ErrorHandler.php line 61:

User Deprecated Functionality: GraphQL\Schema is moved to GraphQL\Type\Sche
ma in /var/www/html/magento2/vendor/webonyx/graphql-php/src/Schema.php on l
ine 12