{"id":19862794,"url":"https://github.com/taunoha/wp-plugin-vue-boilerplate","last_synced_at":"2026-02-27T05:31:29.739Z","repository":{"id":84410121,"uuid":"291529333","full_name":"taunoha/wp-plugin-vue-boilerplate","owner":"taunoha","description":"This plugin's boilerplate allows you to use a Vue-based stateful and reactive application on your WordPress site with minimal configuration.","archived":false,"fork":false,"pushed_at":"2024-11-08T09:49:01.000Z","size":255,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-14T10:16:00.877Z","etag":null,"topics":["boilerplate","i18n","vite","vue","vue3","vuejs","vuejs3","wordpress","wordpress-plugin","wpml-ready"],"latest_commit_sha":null,"homepage":"","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/taunoha.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-30T18:33:55.000Z","updated_at":"2024-11-08T09:49:04.000Z","dependencies_parsed_at":"2024-04-22T10:29:06.620Z","dependency_job_id":"be13b223-7c44-4221-98ea-9521759f66ce","html_url":"https://github.com/taunoha/wp-plugin-vue-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/taunoha/wp-plugin-vue-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taunoha%2Fwp-plugin-vue-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taunoha%2Fwp-plugin-vue-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taunoha%2Fwp-plugin-vue-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taunoha%2Fwp-plugin-vue-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taunoha","download_url":"https://codeload.github.com/taunoha/wp-plugin-vue-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taunoha%2Fwp-plugin-vue-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29885808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T23:51:21.483Z","status":"online","status_checked_at":"2026-02-27T02:00:06.759Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["boilerplate","i18n","vite","vue","vue3","vuejs","vuejs3","wordpress","wordpress-plugin","wpml-ready"],"created_at":"2024-11-12T15:12:42.723Z","updated_at":"2026-02-27T05:31:29.712Z","avatar_url":"https://github.com/taunoha.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A starter plugin to use Vue in your custom WordPress shortcode\n\nThis plugin introduces a shortcode for your WordPress theme. WordPress replaces this shortcode with a Vue-powered UI. \nIt allows you to use a Vue-based stateful and reactive application on your WordPress site with minimal configuration.\n\n```php\n\u003c?php\n   echo apply_shortcodes('[{plugin-shortcode}]');\n?\u003e\n```\nYou can also use the `Shortcode block` in your WordPress editor to add the shortcode to any page or post.\n\n## Before you start\n\n\u003e [!NOTE]\n\u003e Prerequisites\n\u003e * Familiarity with the command line\n\u003e * Install [Node.js](https://nodejs.org/en) version 20.0 (LTS) or higher LTS\n\n### 👉  `npm install`\n* Install the dependencies in the local node_modules folder.\n\n### 👉  `npm run rename`\n* Rename placeholder strings in files\n\n## Development\n\n### 👉  `npm run dev`\n* Use to compile and run the code in development mode.\n* Watches for any changes and reports back any errors in your code.\n  \n### 👉  `npm run lint`\n* Check your source code for programmatic and stylistic errors, and format your code.\n* Format your source code\n\n### 👉  `npm run build`\n* Check your source code for programmatic and stylistic errors.\n* Will extract translatable strings from your code and generate the `languages/messages.php` file.\n  \n## ❗️ Deploy\n\nThe `dist` folder will be overridden each time you run `npm run build` or `npm run dev`. Do not commit this folder to version control. If you use any CI/CD pipeline, make sure to trigger the build process as part of your deployment workflow.\n\n## 🌶️ Auto-imports\n\nI have set up auto-imports for components, composables, Vue.js APIs, and your utilities inside the ``utils`` folder. This includes:\n\n- All components in your ``components`` folder\n- All composables in your ``composables`` folder\n- All utilities in your ``utils`` folder \n- Core Vue.js APIs (ref, computed, watch, etc.)\n- VueUse composables (useStorage, useMouse, useWindowSize, etc.)\n\nYou can use these in your application without explicitly importing them. For example:\n\n```\ncomponents\n├─ Icon\n│  └─ Arrow.vue\n└─ ErrorBoundary.vue\n```\n\nYou can use these components in your templates as:\n```html\n\u003cErrorBoundary /\u003e\n\u003cIconArrow /\u003e\n```\n\nContrary to a classic global declaration, it will preserve typings, IDE completions, and hints and only include what is used in your code.\n\n## 🌶️ Hot Module Replacement (HMR)\n\nHot Module Replacement (HMR) is a development feature that automatically updates your application in real-time as you modify your code. When you run `npm run dev`, HMR will:\n\n- Instantly reflect JavaScript and CSS changes in your browser without a full page reload\n- Preserve the application state during updates\n- Significantly speed up your development workflow\n\nHMR is automatically enabled in development mode (`npm run dev`) and disabled in production builds. You don't need any additional configuration to use this feature.\n\n## \u0026lt;ErrorBoundary\u0026gt; component\n\nThis component handles errors happening in its default slot. It will prevent the error from bubbling up to the top level, and will render the #error slot instead.\nIt uses Vue's [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) hook under the hood.\n\n```html\n\u003cscript setup\u003e\nfunction handleErrorLog(err) {\n  console.log(err);\n}\n\u003c/script\u003e\n\u003ctemplate\u003e\n  \u003cErrorBoundary @error=\"handleErrorLog\"\u003e\n    \u003c!-- --- --\u003e\n    \u003ctemplate #error=\"{ error, clearError }\"\u003e\n      \u003cp\u003e{{ error }}\u003c/p\u003e\n      \u003cbutton @click=\"clearError\"\u003eTry Again\u003c/button\u003e\n    \u003c/template\u003e\n  \u003c/ErrorBoundary\u003e\n\u003c/template\u003e\n```\n\n## i18n\n\nUse the `__(\"Translatable string\")` function in your SFC files to make strings translatable.\n\n```html\n\u003cscript setup\u003e\nconst message = __(\"This is a message from i18n!\");\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003carticle\u003e\n    \u003ch1\u003e{{ __(\"Hello, World!\") }}\u003c/h1\u003e\n    \u003cp\u003e{{ message }}\u003c/p\u003e\n    \u003cp\u003e{{ _n(\"%d person\", \"%d people\", 2) }}\u003c/p\u003e\n    \u003cp\u003e{{ _nx(\"%d person\", \"%d people\", 2, \"different context\") }}\u003c/p\u003e\n    \u003cp\u003e{{ _x(\"This is a message from i18n!\", \"different context\") }}\u003c/p\u003e\n  \u003c/article\u003e\n\u003c/template\u003e\n```\n\n### Translation Plugin Compatibility\n\nThis plugin is compatible with popular WordPress translation plugins like WPML, Polylang, or TranslatePress. The translation functions (`__()`, `_n()`, `_x()`, etc.) integrate with WordPress's translation ecosystem, allowing you to:\n\n- Extract translatable strings using the plugins' string scanning features\n- Manage translations through the plugins' translation interfaces\n- Use the plugins' language switching functionality\n- Maintain translations across different language versions of your site\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaunoha%2Fwp-plugin-vue-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaunoha%2Fwp-plugin-vue-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaunoha%2Fwp-plugin-vue-boilerplate/lists"}