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.
WordPress is open source software you can use to create a beautiful website, blog, or app.
CMS Connect App - adds the connection between the WordPress CMS and VueFront WebApp via a GraphQL API.
This is a wordpress plugin that connects the wordpress CMS with the VueFront WebApp via a GraphQL API. When installed, you will be provided with a CMS Connect URL that you will add to your VueFront WebApp .env file.
Since Wordpress does not have a built-in Store, we use the Free WooCommerce to add store support. If woocommerce is not avalible, VueFront will ignore it.
Php version required >= 5.5, <= 7.2 (this limitation will be removed in the future)
- The quickest way to install is via WordPress Plugin Directory or manually Download the compiled plugin and upload it through the 'Plugins > Add New' menu in WordPress
- Activate the plugin through the 'Plugins' menu in WordPress
- Visit plugin's settings to get the CMS Connect URL
You will need the CMS Connect URL to complete the VueFront Web App installation
- Install the VueFront CMS Connect App from this repo.
- Log in or register an account with VueFront.com
- Build your first Web App
- Activate the new Frontend Web App (only avalible for Apache servers)
For Nginx you need to add this code to your
nginx.configfile right after theindexdirective
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;
}
- Install the VueFront CMS Connect App from this repo.
- Log in or register an account with VueFront.com
- Copy the CMS Connect URL
- Via Ftp create a new folder
vuefrontin the root of your WordPress site on your hosting. - 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
- Copy all files from folder
distto the newly createdvuefrontfolder - modify you
.htaccessfile by adding afterRewriteBaserule 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;
}
For support please contact us at Discord
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!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent