A WordPress theme with the guts ripped out and replaced with Vue

VueWordPress Theme Starter

A true WordPress theme with the guts ripped out and replaced with Vue. Looking to create a Vue-powered WordPress plugin? I’ve got a starter for that too!

Who’s this for? When I started diving into using Vue in WordPress I found plenty of great starters for headless WordPress, but I had the added constraint of needing to run the front and backend on the same host, thus this project was created.

Need help? Join the VueWordPress Slack.

Features

Tailwind is built in! If you don’t want Tailwindcss in your project you can easily disable it by removing the import statement in styles.css.
Hot reloading/browsersync for local development.
VueRouter integrated
Vuex integrated (with sample WordPress-centric modules)
Axios for API requests
Follows the development guidelines/structure set forth by Vuejs
Bare essentials needed for a functional WordPress theme
All requests are redirected back to the index.php so your Vue routing is respected.
PostCSS baby

Getting started

Clone the repo inside of your wp-content/themes/ directory
Navigate to the theme directory in your terminal and run npm install npm run watch for development npm run build when you’re ready to deploy the theme.
Activate the theme in your WordPress instance.
Update your permalink settings (Settings -> Permalinks) to be “Day and name”. If you don’t want to use this setting you’ll need to update the Vue router so it can find your content correctly. Please note that if you want to use a different permalink structure you’ll need to update ./src/router/index.js so it looks for the correct path.
Boom.com!

Since by default Tailwind completely resets all styles/spacing, there are a few initial styles I’ve provided in src/assets/css/_tailwind.css to make things appear more like you’d expect. Modify to your liking!

Video Training

Code Organization

All of the code you’re going to edit is located in /src/. From there it’s broken into a few logical directories.

/src
- /api for API requests
- /assets for images mostly
- /components Vue components
- /router vue-router directives
- /store vuex store and modules
- /assets/css CSS styles
- /vendor 3rd party scripts and libraries

All scripts and styles in /src are compiled down to the /dist directory, which is what you will deploy. When you’re ready to deploy don’t deploy the src/ directory.

New to Vue?

Not sure where to begin? The Vuejs documentation is actually amazing, but if you’re looking for video training I highly recommend the free Learn Vue 2: Step By Step course over at Laracasts. There’s also a great playlist by Academind available on YouTube that covers pretty much everything you’d want to know about building a fully-featured Vue app.

I’ve created a couple of example components in src/components/widgets to give you an idea of how to work with the Vuex store data.

If you’re new to Vue/Vuex I would do the following:

Open up src/app.js this is the main JS file for the app and will give you a glimpse into what’s going on behind the scenes.
Next open up src/App.vue this is the primary app component, a page wrapper of sorts. It contains the header/footer and the <router-view> component which is what loads in all of the other screens as you navigate around the app. Note that by default src/components/Home.vue is loaded into the router-view initially.
Next open up src/routes/index.js and notice how the routes are setup by default. Out of the box there is only one route, the / or home view. For more information on setting up routing within your app checkout Vue-Router.
Next is the Vuex store. I won’t cover how that works here as it’s a tiny bit more advanced. Check out all files in src/store and start to familiarize yourself with what’s going on. It’s based on the official Vuex example project setup and uses Vuex modules. By default I’ve included a couple of modules I thought you might need.

The first thing you’re probably going to want to do is start editing and components in src/components/.

External References

Features coming soon:

More documentation

Changelog

2020-01-29

Removed some legacy CSS, further integrated Tailwind.
Added browser-sync!
Reorganized and updated the webpack config and files.
Updated many npm packages including webpack
Updated webpack production minification/optimization settings.

2020-01-28

Updated npm packages
New theme screenshot
Updated README
Updated Home component

2020-01-28

Added tailwindcss support.
npm module updates
updated to latest version of Vuejs

2019-02-05 Added

Support for postcss
New css style examples
Cache busters for js and css

Changed

Updated outdated npm packages
Recent post and Page widgets to use router-link
Removed Laravel Mix and replaced with standard webpack config

Removed

Example Firebase integration
jQuery
Several unused npm dependencies
Bootstrap / Bootstrap Vue
Several variables that were stored on the window object
Support for sass styling (switched to postcss)

2018-08-20 Added

Default routing for posts and pages. @EvanAgee
Views for posts and pages. @EvanAgee
getters for pages. @EvanAgee
Examples for fetching pages/posts with either Vuex actions OR in component. @EvanAgee
Activated LocalStorage plugin in store. @EvanAgee
Loader component. @EvanAgee

Removed

UglifyJS. @EvanAgee

2017-10-24 Added

status_header(200) to keep Wordpress from returning 404 for vue-router paths.

2017-10-21 Removed

vue-slick dependency
vue2-google-maps dependency
unnecessary header/footer php files
the-tailor dependency
font-awesome dependency

Changed

Updated webpack (Larevel Mix) config
Switched from Bootstrap to Bootstrap-Vue

Fixed

Fixed index.php

2017-10-17 Added

More documnentation. @EvanAgee
Post module. @EvanAgee
A few code comments. @EvanAgee
Example widgets for posts and pages. @EvanAgee

Changed

Home page to display the posts and pages widgets. @EvanAgee

2017-10-11 Initial commit

Download Details:

Author: EvanAgee

Demo: https://vuewp.com/

Source Code: https://github.com/EvanAgee/vuejs-wordpress-theme-starter

#vuejs #vue #vue-js #javascript #wordpress

What is GEEK

Buddha Community

A WordPress theme with the guts ripped out and replaced with Vue

Vue.js Tutorial

1596917700

A WordPress theme with the guts ripped out and replaced with Vue

VueWordPress Theme Starter

A true WordPress theme with the guts ripped out and replaced with Vue. Looking to create a Vue-powered WordPress plugin? I’ve got a starter for that too!

Who’s this for? When I started diving into using Vue in WordPress I found plenty of great starters for headless WordPress, but I had the added constraint of needing to run the front and backend on the same host, thus this project was created.

Need help? Join the VueWordPress Slack.

Features

Tailwind is built in! If you don’t want Tailwindcss in your project you can easily disable it by removing the import statement in styles.css.
Hot reloading/browsersync for local development.
VueRouter integrated
Vuex integrated (with sample WordPress-centric modules)
Axios for API requests
Follows the development guidelines/structure set forth by Vuejs
Bare essentials needed for a functional WordPress theme
All requests are redirected back to the index.php so your Vue routing is respected.
PostCSS baby

Getting started

Clone the repo inside of your wp-content/themes/ directory
Navigate to the theme directory in your terminal and run npm install npm run watch for development npm run build when you’re ready to deploy the theme.
Activate the theme in your WordPress instance.
Update your permalink settings (Settings -> Permalinks) to be “Day and name”. If you don’t want to use this setting you’ll need to update the Vue router so it can find your content correctly. Please note that if you want to use a different permalink structure you’ll need to update ./src/router/index.js so it looks for the correct path.
Boom.com!

Since by default Tailwind completely resets all styles/spacing, there are a few initial styles I’ve provided in src/assets/css/_tailwind.css to make things appear more like you’d expect. Modify to your liking!

Video Training

Code Organization

All of the code you’re going to edit is located in /src/. From there it’s broken into a few logical directories.

/src
- /api for API requests
- /assets for images mostly
- /components Vue components
- /router vue-router directives
- /store vuex store and modules
- /assets/css CSS styles
- /vendor 3rd party scripts and libraries

All scripts and styles in /src are compiled down to the /dist directory, which is what you will deploy. When you’re ready to deploy don’t deploy the src/ directory.

New to Vue?

Not sure where to begin? The Vuejs documentation is actually amazing, but if you’re looking for video training I highly recommend the free Learn Vue 2: Step By Step course over at Laracasts. There’s also a great playlist by Academind available on YouTube that covers pretty much everything you’d want to know about building a fully-featured Vue app.

I’ve created a couple of example components in src/components/widgets to give you an idea of how to work with the Vuex store data.

If you’re new to Vue/Vuex I would do the following:

Open up src/app.js this is the main JS file for the app and will give you a glimpse into what’s going on behind the scenes.
Next open up src/App.vue this is the primary app component, a page wrapper of sorts. It contains the header/footer and the <router-view> component which is what loads in all of the other screens as you navigate around the app. Note that by default src/components/Home.vue is loaded into the router-view initially.
Next open up src/routes/index.js and notice how the routes are setup by default. Out of the box there is only one route, the / or home view. For more information on setting up routing within your app checkout Vue-Router.
Next is the Vuex store. I won’t cover how that works here as it’s a tiny bit more advanced. Check out all files in src/store and start to familiarize yourself with what’s going on. It’s based on the official Vuex example project setup and uses Vuex modules. By default I’ve included a couple of modules I thought you might need.

The first thing you’re probably going to want to do is start editing and components in src/components/.

External References

Features coming soon:

More documentation

Changelog

2020-01-29

Removed some legacy CSS, further integrated Tailwind.
Added browser-sync!
Reorganized and updated the webpack config and files.
Updated many npm packages including webpack
Updated webpack production minification/optimization settings.

2020-01-28

Updated npm packages
New theme screenshot
Updated README
Updated Home component

2020-01-28

Added tailwindcss support.
npm module updates
updated to latest version of Vuejs

2019-02-05 Added

Support for postcss
New css style examples
Cache busters for js and css

Changed

Updated outdated npm packages
Recent post and Page widgets to use router-link
Removed Laravel Mix and replaced with standard webpack config

Removed

Example Firebase integration
jQuery
Several unused npm dependencies
Bootstrap / Bootstrap Vue
Several variables that were stored on the window object
Support for sass styling (switched to postcss)

2018-08-20 Added

Default routing for posts and pages. @EvanAgee
Views for posts and pages. @EvanAgee
getters for pages. @EvanAgee
Examples for fetching pages/posts with either Vuex actions OR in component. @EvanAgee
Activated LocalStorage plugin in store. @EvanAgee
Loader component. @EvanAgee

Removed

UglifyJS. @EvanAgee

2017-10-24 Added

status_header(200) to keep Wordpress from returning 404 for vue-router paths.

2017-10-21 Removed

vue-slick dependency
vue2-google-maps dependency
unnecessary header/footer php files
the-tailor dependency
font-awesome dependency

Changed

Updated webpack (Larevel Mix) config
Switched from Bootstrap to Bootstrap-Vue

Fixed

Fixed index.php

2017-10-17 Added

More documnentation. @EvanAgee
Post module. @EvanAgee
A few code comments. @EvanAgee
Example widgets for posts and pages. @EvanAgee

Changed

Home page to display the posts and pages widgets. @EvanAgee

2017-10-11 Initial commit

Download Details:

Author: EvanAgee

Demo: https://vuewp.com/

Source Code: https://github.com/EvanAgee/vuejs-wordpress-theme-starter

#vuejs #vue #vue-js #javascript #wordpress

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Solwin Infotech

1620729846

Why Use WordPress? What Can You Do With WordPress?

Can you use WordPress for anything other than blogging? To your surprise, yes. WordPress is more than just a blogging tool, and it has helped thousands of websites and web applications to thrive. The use of WordPress powers around 40% of online projects, and today in our blog, we would visit some amazing uses of WordPress other than blogging.
What Is The Use Of WordPress?

WordPress is the most popular website platform in the world. It is the first choice of businesses that want to set a feature-rich and dynamic Content Management System. So, if you ask what WordPress is used for, the answer is – everything. It is a super-flexible, feature-rich and secure platform that offers everything to build unique websites and applications. Let’s start knowing them:

1. Multiple Websites Under A Single Installation
WordPress Multisite allows you to develop multiple sites from a single WordPress installation. You can download WordPress and start building websites you want to launch under a single server. Literally speaking, you can handle hundreds of sites from one single dashboard, which now needs applause.
It is a highly efficient platform that allows you to easily run several websites under the same login credentials. One of the best things about WordPress is the themes it has to offer. You can simply download them and plugin for various sites and save space on sites without losing their speed.

2. WordPress Social Network
WordPress can be used for high-end projects such as Social Media Network. If you don’t have the money and patience to hire a coder and invest months in building a feature-rich social media site, go for WordPress. It is one of the most amazing uses of WordPress. Its stunning CMS is unbeatable. And you can build sites as good as Facebook or Reddit etc. It can just make the process a lot easier.
To set up a social media network, you would have to download a WordPress Plugin called BuddyPress. It would allow you to connect a community page with ease and would provide all the necessary features of a community or social media. It has direct messaging, activity stream, user groups, extended profiles, and so much more. You just have to download and configure it.
If BuddyPress doesn’t meet all your needs, don’t give up on your dreams. You can try out WP Symposium or PeepSo. There are also several themes you can use to build a social network.

3. Create A Forum For Your Brand’s Community
Communities are very important for your business. They help you stay in constant connection with your users and consumers. And allow you to turn them into a loyal customer base. Meanwhile, there are many good technologies that can be used for building a community page – the good old WordPress is still the best.
It is the best community development technology. If you want to build your online community, you need to consider all the amazing features you get with WordPress. Plugins such as BB Press is an open-source, template-driven PHP/ MySQL forum software. It is very simple and doesn’t hamper the experience of the website.
Other tools such as wpFoRo and Asgaros Forum are equally good for creating a community blog. They are lightweight tools that are easy to manage and integrate with your WordPress site easily. However, there is only one tiny problem; you need to have some technical knowledge to build a WordPress Community blog page.

4. Shortcodes
Since we gave you a problem in the previous section, we would also give you a perfect solution for it. You might not know to code, but you have shortcodes. Shortcodes help you execute functions without having to code. It is an easy way to build an amazing website, add new features, customize plugins easily. They are short lines of code, and rather than memorizing multiple lines; you can have zero technical knowledge and start building a feature-rich website or application.
There are also plugins like Shortcoder, Shortcodes Ultimate, and the Basics available on WordPress that can be used, and you would not even have to remember the shortcodes.

5. Build Online Stores
If you still think about why to use WordPress, use it to build an online store. You can start selling your goods online and start selling. It is an affordable technology that helps you build a feature-rich eCommerce store with WordPress.
WooCommerce is an extension of WordPress and is one of the most used eCommerce solutions. WooCommerce holds a 28% share of the global market and is one of the best ways to set up an online store. It allows you to build user-friendly and professional online stores and has thousands of free and paid extensions. Moreover as an open-source platform, and you don’t have to pay for the license.
Apart from WooCommerce, there are Easy Digital Downloads, iThemes Exchange, Shopify eCommerce plugin, and so much more available.

6. Security Features
WordPress takes security very seriously. It offers tons of external solutions that help you in safeguarding your WordPress site. While there is no way to ensure 100% security, it provides regular updates with security patches and provides several plugins to help with backups, two-factor authorization, and more.
By choosing hosting providers like WP Engine, you can improve the security of the website. It helps in threat detection, manage patching and updates, and internal security audits for the customers, and so much more.

Hire WordPress Developer

Whether you want to develop a blog or you want a feature-rich, interactive WordPress website?

HourlyDeveloper.io is a distinguished leader in the WordPress development market. Hire WordPress Developer that develop easy-to-manage and high-performance WordPress websites that deliver the kind of results you have always wished for!

Consult with experts: https://bit.ly/3hiHIqj

#hire wordpress developer #wordpress #wordpress developer #wordpress development company #wordpress development services #wordpress development

Juned Ghanchi

1621916889

Wordpress Development India, Hire Wordpress Developers

Hire WordPress developers from IndianAppDevelopers on an hourly or full-time basis to build advanced custom WordPress applications. Our WordPress developers have 5+ years of experience building websites, themes and plugins for small- and large-scale businesses.

You can hire highly knowledgeable WordPress developers in India from us to maintain and deliver the highest quality standards on-time solutions.

Looking to outsource a WordPress development project? Or want to hire WordPress developers? Then, get in touch with us.

#wordpress development india #hire wordpress developers india #wordpress development #wordpress developers #wordpress programmers #hire wordpress programmers