{"id":22486518,"url":"https://github.com/EvanAgee/vuejs-wordpress-theme-starter","last_synced_at":"2025-08-02T19:32:11.721Z","repository":{"id":25798107,"uuid":"106524960","full_name":"EvanAgee/vuejs-wordpress-theme-starter","owner":"EvanAgee","description":"A WordPress theme with the guts ripped out and replaced with Vue.","archived":false,"fork":false,"pushed_at":"2023-06-25T12:09:03.000Z","size":5055,"stargazers_count":1611,"open_issues_count":37,"forks_count":281,"subscribers_count":77,"default_branch":"master","last_synced_at":"2024-11-20T14:17:08.433Z","etag":null,"topics":["spa","starters","vue","vue-router","vuejs","vuejs2","vuex-modules","vuex-store","wordpress","wordpress-theme"],"latest_commit_sha":null,"homepage":"https://vuewp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EvanAgee.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-10-11T08:12:05.000Z","updated_at":"2024-11-20T04:17:58.000Z","dependencies_parsed_at":"2023-01-14T03:26:36.685Z","dependency_job_id":"b6b61ab3-443c-440b-bbfb-e3730a441178","html_url":"https://github.com/EvanAgee/vuejs-wordpress-theme-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvanAgee%2Fvuejs-wordpress-theme-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvanAgee%2Fvuejs-wordpress-theme-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvanAgee%2Fvuejs-wordpress-theme-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvanAgee%2Fvuejs-wordpress-theme-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EvanAgee","download_url":"https://codeload.github.com/EvanAgee/vuejs-wordpress-theme-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500109,"owners_count":17930001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["spa","starters","vue","vue-router","vuejs","vuejs2","vuex-modules","vuex-store","wordpress","wordpress-theme"],"created_at":"2024-12-06T17:14:44.637Z","updated_at":"2024-12-06T17:15:55.527Z","avatar_url":"https://github.com/EvanAgee.png","language":"JavaScript","readme":"[![image](https://res.cloudinary.com/evanagee/image/upload/c_scale,w_700/v1580244758/VueWP/VWP-hero.png)](https://vuewordpress.com)\n\n[![Tweet](https://img.shields.io/twitter/url/https/github.com/tterb/hyde.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20Hyde!%20%E2%9C%A8%20An%20accessible,%20open-source%20markdown%20editor%20for%20any%20user%20E2%9C%A8%20https://github.com/tterb/hyde%20%F0%9F%A4%97) [![Twitter Follow](https://img.shields.io/twitter/follow/VueWord.svg?style=social)](https://twitter.com/VueWord)\n\n- [VueWordPress Theme Starter](#vuewordpress-theme-starter)\n  - [Features](#features)\n  - [Getting started](#getting-started)\n  - [Video Training](#video-training)\n  - [Code Organization](#code-organization)\n  - [New to Vue?](#new-to-vue)\n  - [External References](#external-references)\n  - [Features coming soon:](#features-coming-soon)\n- [Changelog](#changelog)\n\n# VueWordPress Theme Starter\n\nA 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!](https://github.com/EvanAgee/vuejs-wordpress-plugin-starter)**\n\n**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.\n\n**Need help? [Join the VueWordPress Slack](https://join.slack.com/t/vuewordpress/shared_invite/enQtMjg5NzAzMzY5Mzk0LTk2YjljNmIxZDk2Y2IzNDc2NzI3M2M3M2FhNjJkZjE5YWNhNmU5OWExZjI5YjRiMjcwYzk3ZWViMWIyMWE1MDY).**\n\n## Features\n\n- [Tailwind](https://tailwindcss.com/) 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`.\n- **Hot reloading/browsersync** for local development.\n- [VueRouter](https://github.com/vuejs/vue-router) integrated\n- [Vuex](https://github.com/vuejs/vuex) integrated (with sample WordPress-centric modules)\n- [Axios](https://github.com/axios/axios) for API requests\n- Follows the development guidelines/structure set forth by Vuejs\n- Bare essentials needed for a functional WordPress theme\n- All requests are redirected back to the index.php so your Vue routing is respected.\n- PostCSS baby\n\n## Getting started\n\n[![Watch the getting started video](https://res.cloudinary.com/evanagee/image/upload/c_scale,w_1000/v1580251167/VueWP/getting-started-youtube2.jpg)](https://www.youtube.com/watch?v=xF-ZVrk7N5g)\n\n1. **Clone the repo** inside of your `wp-content/themes/` directory\n2. **Navigate to the theme directory in your terminal** and run\n   `npm install`\n   `npm run watch` for development\n   `npm run build` when you're ready to deploy the theme.\n3. **Activate the theme** in your WordPress instance.\n4. **Update your permalink settings** `(Settings -\u003e 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.\n5. Boom.com!\n\nSince 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!\n\n## Video Training\n\n- [Subscribe on YouTube](https://www.youtube.com/channel/UCg8pbW81_DtpPZGiZMpJRyw)\n- [Getting Started](https://www.youtube.com/watch?v=xF-ZVrk7N5g)\n- [How to add WordPress menu support](https://www.youtube.com/watch?v=sCT7jQEbXxc)\n\n## Code Organization\n\nAll of the code you're going to edit is located in `/src/`. From there it's broken into a few logical directories.\n\n- `/src`\n  - `/api` for API requests\n  - `/assets` for images mostly\n  - `/components` Vue components\n  - `/router` vue-router directives\n  - `/store` vuex store and modules\n  - `/assets/css` CSS styles\n  - `/vendor` 3rd party scripts and libraries\n\nAll 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.**\n\n## New to Vue?\n\nNot sure where to begin? The [Vuejs documentation](https://vuejs.org/v2/guide/) is actually amazing, but if you're looking for video training I highly recommend the free [Learn Vue 2: Step By Step](https://laracasts.com/series/learn-vue-2-step-by-step) course over at Laracasts. There's also a [great playlist by Academind](https://www.youtube.com/watch?v=FXY1UyQfSFw\u0026list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt) available on YouTube that covers pretty much everything you'd want to know about building a fully-featured Vue app.\n\nI'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.\n\nIf you're new to Vue/Vuex I would do the following:\n\n- 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.\n- Next open up `src/App.vue` this is the primary app component, a page wrapper of sorts. It contains the header/footer and the `\u003crouter-view\u003e` 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.\n- 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](https://router.vuejs.org/).\n- 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.\n\nThe first thing you're probably going to want to do is start editing and components in `src/components/`.\n\n## External References\n\n- [Creating Vuex Modules](https://vuex.vuejs.org/en/modules.html)\n- [vue-router](https://github.com/vuejs/vue-router)\n- [WordPress REST API](http://v2.wp-api.org/)\n- [WordPress REST API Handbook](https://developer.wordpress.org/rest-api/)\n- [Expose ACF fields to REST API](https://github.com/airesvsg/acf-to-rest-api/)\n\n## Features coming soon:\n\n- More documentation\n\n# Changelog\n\n**2020-01-29**\n\n- Removed some legacy CSS, further integrated Tailwind.\n- Added browser-sync!\n- Reorganized and updated the webpack config and files.\n- Updated many npm packages including webpack\n- Updated webpack production minification/optimization settings.\n\n---\n\n**2020-01-28**\n\n- Updated npm packages\n- New theme screenshot\n- Updated README\n- Updated Home component\n\n---\n\n**2020-01-28**\n\n- Added [tailwindcss](https://tailwindcss.com/docs/installation#using-tailwind-with-postcss) support.\n- npm module updates\n- updated to latest version of Vuejs\n\n---\n\n**2019-02-05**\n**Added**\n\n- Support for postcss\n- New css style examples\n- Cache busters for js and css\n\n**Changed**\n\n- Updated outdated npm packages\n- Recent post and Page widgets to use router-link\n- Removed Laravel Mix and replaced with standard webpack config\n\n**Removed**\n\n- Example Firebase integration\n- jQuery\n- Several unused npm dependencies\n- Bootstrap / Bootstrap Vue\n- Several variables that were stored on the window object\n- Support for sass styling (switched to postcss)\n\n---\n\n**2018-08-20**\n**Added**\n\n- Default routing for posts and pages. @EvanAgee\n- Views for posts and pages. @EvanAgee\n- getters for pages. @EvanAgee\n- Examples for fetching pages/posts with either Vuex actions OR in component. @EvanAgee\n- Activated LocalStorage plugin in store. @EvanAgee\n- Loader component. @EvanAgee\n\n**Removed**\n\n- UglifyJS. @EvanAgee\n\n---\n\n**2017-10-24**\n**Added**\n\n- status_header(200) to keep Wordpress from returning 404 for vue-router paths.\n\n**2017-10-21**\n**Removed**\n\n- vue-slick dependency\n- vue2-google-maps dependency\n- unnecessary header/footer php files\n- the-tailor dependency\n- font-awesome dependency\n\n**Changed**\n\n- Updated webpack (Larevel Mix) config\n- Switched from Bootstrap to [Bootstrap-Vue](https://bootstrap-vue.js.org)\n\n**Fixed**\n\n- Fixed index.php\n\n---\n\n**2017-10-17**\n**Added**\n\n- More documnentation. @EvanAgee\n- Post module. @EvanAgee\n- A few code comments. @EvanAgee\n- Example widgets for posts and pages. @EvanAgee\n\n**Changed**\n\n- Home page to display the posts and pages widgets. @EvanAgee\n\n---\n\n**2017-10-11**\nInitial commit\n","funding_links":[],"categories":["JavaScript","脚手架","Components \u0026 Libraries","Scaffold","Scaffold [🔝](#readme)"],"sub_categories":["源代码编辑","Scaffold","Source Code Editing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEvanAgee%2Fvuejs-wordpress-theme-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FEvanAgee%2Fvuejs-wordpress-theme-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEvanAgee%2Fvuejs-wordpress-theme-starter/lists"}