├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── LICENSE ├── README.md ├── includes ├── index.php └── shortcodes.php ├── package-lock.json ├── package.json ├── prettier.config.js ├── public └── index.php ├── src-js ├── ComponentsExample.vue ├── SimpleExample.vue ├── components-example.js ├── components │ ├── Content.vue │ └── Header.vue └── simple-example.js ├── webpack.common.js ├── webpack.dev.js ├── webpack.prod.js └── wp-vue-plugin-boilerplate.php /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": [ 7 | ">0.2%", 8 | "not dead", 9 | "not ie <= 11", 10 | "not op_mini all" 11 | ] 12 | } 13 | }] 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /.git 2 | /.vscode 3 | /node_modules 4 | /public/js/**/*.js 5 | **/*.php -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true 9 | }, 10 | extends: [ 11 | // add more generic rulesets here, such as: 12 | // 'eslint:recommended', 13 | 'plugin:vue/recommended', 14 | 'standard' 15 | ], 16 | plugins: [ 17 | 'vue' 18 | ], 19 | 'rules': { 20 | // allow async-await 21 | 'generator-star-spacing': 'off', 22 | 23 | // allow paren-less arrow functions 24 | 'arrow-parens': 0, 25 | 'one-var': 0, 26 | 27 | 'import/first': 0, 28 | 'import/named': 2, 29 | 'import/namespace': 2, 30 | 'import/default': 2, 31 | 'import/export': 2, 32 | 'import/extensions': 0, 33 | 'import/no-unresolved': 0, 34 | 'import/no-extraneous-dependencies': 0, 35 | 36 | // allow debugger during development 37 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /public/js/ 4 | npm-debug.log* 5 | 6 | # Editor directories and files 7 | .vscode 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Camilo Mejia 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WordPress and Vue.js plugin boilerplate 2 | 3 | Boilerplate to create a plugin that integrate Vue.js in selected pages. It's not intended for a headless WordPress. 4 | 5 | ## Features 6 | 7 | - Shortcode examples that illustrate how to integrate Vue.js in your pages 8 | - Auto reload browser with Browsersync 9 | - SCSS ready 10 | - Code spliting 11 | - Linter included 12 | 13 | ## Usage 14 | 15 | ### Develop 16 | 17 | ```bash 18 | $ npm install 19 | $ npm start 20 | ``` 21 | 22 | ### Build 23 | 24 | ```bash 25 | $ npm build 26 | ``` 27 | 28 | ### Browsersync 29 | 30 | Edit `webpack.dev.js` with your develop path: 31 | 32 | ```javascript 33 | new BrowserSyncPlugin({ 34 | proxy: 'http://mysite.localhost:8080', // Edit this line 35 | files: [ 36 | './**/*.php', 37 | './src-js/*' 38 | ], 39 | port: 3000 40 | }) 41 | ``` 42 | 43 | ### Code spliting 44 | 45 | All your Vue.js code will be in `src-js` folder. You can create multiple entry points in `webpack.common.js` to split the code: 46 | 47 | ```javascript 48 | entry: { 49 | 'simple-example': './src-js/simple-example.js', 50 | 'components-example': './src-js/components-example.js' 51 | }, 52 | ``` 53 | 54 | ### Shortcode examples 55 | 56 | Include the `[simple_example]` or `[components_example]` shortcodes in any page to see the examples working. You can add them multiple times in the same page. 57 | -------------------------------------------------------------------------------- /includes/index.php: -------------------------------------------------------------------------------- 1 | '; 10 | } ); 11 | 12 | add_shortcode( 'components_example', function() { 13 | wp_enqueue_script( 'vue-components-example' ); 14 | 15 | return '
'; 16 | } ); 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wp-vue-plugin-boilerplate", 3 | "version": "1.0.0", 4 | "description": "A WordPress plugin boilerplate with Vue.js", 5 | "author": "Camilo Mejia", 6 | "homepage": "https://github.com/camilosw/wp-vue-plugin-boilerplate", 7 | "license": "MIT", 8 | "scripts": { 9 | "start": "webpack --watch --config webpack.dev.js", 10 | "build": "webpack --config webpack.prod.js" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.6.6" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.26.3", 17 | "babel-eslint": "^9.0.0", 18 | "babel-loader": "^7.1.5", 19 | "babel-preset-env": "^1.7.0", 20 | "browser-sync": "^2.24.7", 21 | "browser-sync-webpack-plugin": "^2.2.2", 22 | "css-loader": "^1.0.1", 23 | "eslint": "^5.13.0", 24 | "eslint-config-standard": "^12.0.0", 25 | "eslint-loader": "^2.1.2", 26 | "eslint-plugin-import": "^2.16.0", 27 | "eslint-plugin-node": "^7.0.1", 28 | "eslint-plugin-promise": "^4.0.1", 29 | "eslint-plugin-standard": "^4.0.0", 30 | "eslint-plugin-vue": "^4.7.1", 31 | "node-sass": "^4.11.0", 32 | "sass-loader": "^7.1.0", 33 | "vue-loader": "^15.6.2", 34 | "vue-style-loader": "^4.1.2", 35 | "vue-template-compiler": "^2.6.6", 36 | "webpack": "^4.29.3", 37 | "webpack-cli": "^3.2.3", 38 | "webpack-merge": "^4.2.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 100, 3 | singleQuote: true, 4 | trailingComma: 'all', 5 | bracketSpacing: true, 6 | tabWidth: 2, 7 | semi: false 8 | }; 9 | -------------------------------------------------------------------------------- /public/index.php: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 | 7 | 8 | 23 | -------------------------------------------------------------------------------- /src-js/SimpleExample.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | -------------------------------------------------------------------------------- /src-js/components-example.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import ComponentsExample from './ComponentsExample.vue' 3 | 4 | // Allow multiple Vue apps in the same page 5 | const appElements = document.querySelectorAll('.vue-components-example') 6 | Array.from(appElements).forEach(element => { 7 | /* eslint-disable no-new */ 8 | new Vue({ 9 | el: element, 10 | render: h => h(ComponentsExample) 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /src-js/components/Content.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src-js/components/Header.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /src-js/simple-example.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import SimpleExample from './SimpleExample.vue' 4 | 5 | // Allow multiple Vue apps in the same page 6 | const appElements = document.querySelectorAll('.vue-simple-example') 7 | Array.from(appElements).forEach(element => { 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: element, 11 | render: h => h(SimpleExample) 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 3 | 4 | module.exports = { 5 | entry: { 6 | 'simple-example': './src-js/simple-example.js', 7 | 'components-example': './src-js/components-example.js' 8 | }, 9 | output: { 10 | path: path.resolve(__dirname, 'public/js'), 11 | filename: '[name].js' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.vue$/, 17 | loader: 'vue-loader' 18 | }, 19 | { 20 | enforce: 'pre', 21 | test: /\.(js|vue)$/, 22 | loader: 'eslint-loader', 23 | exclude: /node_modules/ 24 | }, 25 | { 26 | test: /\.js$/, 27 | loader: 'babel-loader', 28 | exclude: file => ( 29 | /node_modules/.test(file) && 30 | !/\.vue\.js/.test(file) 31 | ) 32 | }, 33 | { 34 | test: /\.css$/, 35 | use: [ 36 | 'vue-style-loader', 37 | 'css-loader' 38 | ] 39 | }, 40 | { 41 | test: /\.scss$/, 42 | use: [ 43 | 'vue-style-loader', 44 | 'css-loader', 45 | 'sass-loader' 46 | ] 47 | } 48 | ] 49 | }, 50 | plugins: [ 51 | new VueLoaderPlugin() 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /webpack.dev.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const common = require('./webpack.common.js') 3 | const BrowserSyncPlugin = require('browser-sync-webpack-plugin') 4 | 5 | module.exports = merge(common, { 6 | mode: 'development', 7 | devtool: 'eval-source-map', 8 | plugins: [ 9 | new BrowserSyncPlugin({ 10 | proxy: 'http://wordpress.localhost:8888', 11 | files: [ 12 | './**/*.php', 13 | './src-js/*' 14 | ], 15 | port: 3000 16 | }) 17 | ] 18 | }) 19 | -------------------------------------------------------------------------------- /webpack.prod.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const common = require('./webpack.common.js') 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }) 8 | -------------------------------------------------------------------------------- /wp-vue-plugin-boilerplate.php: -------------------------------------------------------------------------------- 1 |