├── .gitignore
├── README.md
├── inc
    ├── vwp-plugin-activate.php
    └── vwp-plugin-deactivate.php
├── index.php
├── package-lock.json
├── package.json
├── public
    ├── scripts.js
    └── styles.css
├── src
    ├── css
    │   └── index.css
    ├── js
    │   └── index.js
    └── vue
    │   ├── App.vue
    │   └── index.js
├── templates
    └── admin
    │   └── index.php
├── vwp-plugin.php
└── webpack
    ├── loaders
        ├── babel.js
        ├── files.js
        ├── fonts.js
        ├── index.js
        ├── postcss.js
        └── vue.js
    ├── plugins
        ├── browser-sync.js
        └── index.js
    └── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![image](https://res.cloudinary.com/evanagee/image/upload/v1580244758/VueWP/VWP-hero.png)
 2 | 
 3 | # vuejs-wordpress-plugin-starter
 4 | 
 5 | - Browsersync for auto refreshing during local development
 6 | - webpack to handle all of the assets
 7 | 
 8 | ## Getting Started
 9 | 
10 | - Clone the repo inside of your `wp-content/plugins` directory
11 | - Rename the cloned plugin directory, `vwp-plugin.php` and the files inside of the `inc/` directory to suite your needs.
12 | - Review the contents of vwp-plugin.php making sure to replace any occurances of `vwp-plugin`, `vwp_plugin` and `VwpPlugin` with your own namespacing.
13 | - Navigate to the plugin's directory and run
14 |   `npm install`
15 |   `npm run watch` for development
16 |   `npm run build` when you're ready to deploy the plugin.
17 | - Note `templates/admin/index.php` is the base PHP template for the plugin settings UI. It has an element `<div id="vwp-plugin"></div>` where the Vue app is getting mounted.
18 | - The provided Vue template can be found in `src/vue/App.vue`.
19 | - Activate the plugin in WordPress
20 | - Get to work!
21 | 


--------------------------------------------------------------------------------
/inc/vwp-plugin-activate.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | class VwpPluginActivate
4 | {
5 |   public static function activate() {
6 |     flush_rewrite_rules();
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/inc/vwp-plugin-deactivate.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | class VwpPluginDeactivate
4 | {
5 |   public static function deactivate() {
6 |     flush_rewrite_rules();
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EvanAgee/vuejs-wordpress-plugin-starter/0ef13ebb7a497950703cc8dbd48399c60b19f563/index.php


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vwp-plugin",
 3 |   "version": "1.0.0",
 4 |   "description": "[![Build Status](https://travis-ci.org/Automattic/_s.svg?branch=master)](https://travis-ci.org/Automattic/_s)",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "NODE_ENV=development webpack --watch --config ./webpack/webpack.config.js",
 8 |     "build": "NODE_ENV=production webpack --config ./webpack/webpack.config.js --mode production",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "author": "Evan Agee",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "@babel/core": "^7.8.4",
15 |     "@babel/preset-env": "^7.8.4",
16 |     "babel-loader": "^8.0.6",
17 |     "babel-minify-webpack-plugin": "^0.3.1",
18 |     "babel-polyfill": "^6.26.0",
19 |     "browser-sync": "^2.26.7",
20 |     "browser-sync-webpack-plugin": "^2.2.2",
21 |     "css-loader": "^3.4.2",
22 |     "file-loader": "^5.0.2",
23 |     "mini-css-extract-plugin": "^0.9.0",
24 |     "postcss-loader": "^3.0.0",
25 |     "postcss-nested": "^4.2.1",
26 |     "uglifyjs-webpack-plugin": "^2.2.0",
27 |     "vue": "^2.6.11",
28 |     "vue-loader": "^15.8.3",
29 |     "vue-template-compiler": "^2.6.11",
30 |     "webpack": "^4.41.5",
31 |     "webpack-cli": "^3.3.10",
32 |     "serialize-javascript": ">=2.1.1"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/public/styles.css:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOltdLCJzb3VyY2VSb290IjoiIn0=*/


--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EvanAgee/vuejs-wordpress-plugin-starter/0ef13ebb7a497950703cc8dbd48399c60b19f563/src/css/index.css


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | import '../css/index.css';
2 | import '../vue/index.js';
3 | 


--------------------------------------------------------------------------------
/src/vue/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Howdy from Vue!</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {};
 7 | </script>
 8 | 
 9 | <style lang="css" scoped>
10 | </style>
11 | 


--------------------------------------------------------------------------------
/src/vue/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | 
3 | import App from './App.vue';
4 | 
5 | new Vue({
6 |   el: '#vwp-plugin',
7 |   render: h => h(App),
8 | });
9 | 


--------------------------------------------------------------------------------
/templates/admin/index.php:
--------------------------------------------------------------------------------
 1 | <h1>Vue WordPress</h1>
 2 | <div id="vwp-plugin"></div>
 3 | 
 4 | <?php if ( preg_match("/(.*.loc|localhost:.*|.*.local)/i", $_SERVER['HTTP_HOST']) ) : ?>
 5 |   <!-- BrowserSync for local development -->
 6 | <script id="__bs_script__">//<![CDATA[
 7 | document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
 8 | //]]></script>
 9 | <?php endif; ?>
10 | 


--------------------------------------------------------------------------------
/vwp-plugin.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * @wordpress-plugin
 4 |  * Plugin Name:       Vue WordPress
 5 |  * Plugin URI:        http://vuewp.com
 6 |  * Description:       This is a short description of what the plugin does. It's displayed in the WordPress admin area.
 7 |  * Version:           1.0.0
 8 |  * Author:            Vue WordPress
 9 |  * Author URI:        vuewp.com
10 |  * License:           GPL-2.0+
11 |  * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
12 |  * Text Domain:       vwp-plugin
13 |  * Domain Path:       /languages
14 |  */
15 | 
16 | // If this file is called directly, abort.
17 | if ( ! defined( 'WPINC' ) ) {
18 | 	die;
19 | }
20 | 
21 | class VwpPlugin
22 | {
23 |   public $plugin;
24 | 
25 |   function __construct() {
26 |     $this->plugin = plugin_basename(__FILE__);
27 |   }
28 | 
29 |   function register() {
30 |     add_action('admin_menu', array($this, 'add_admin_page'));
31 |     add_action('admin_enqueue_scripts', array($this, 'enqueue_assets'));
32 |     add_filter("plugin_action_links_$this->plugin", array($this, 'settings_link'));
33 |   }
34 | 
35 |   public function settings_link( $links ) {
36 |     $settings_link = '<a href="admin.php?page=vwp_plugin">Settings</a>';
37 |     array_push($links, $settings_link);
38 |     return $links;
39 |   }
40 | 
41 |   function enqueue_assets() {
42 |     wp_enqueue_style( "$this->plugin-css", plugins_url('/public/styles.css', __FILE__) );
43 |     wp_enqueue_script( "$this->plugin-js", plugins_url('/public/scripts.js', __FILE__), null, null, true );
44 |   }
45 | 
46 |   public function add_admin_page() {
47 |     add_menu_page("Vue WordPress", 'Vue WordPress', 'manage_options', 'vwp_plugin', array($this, 'admin_index'), '');
48 |   }
49 | 
50 |   public function admin_index() {
51 |     require_once plugin_dir_path(__FILE__) . 'templates/admin/index.php';
52 |   }
53 | }
54 | 
55 | if ( class_exists('VwpPlugin') ) {
56 |   $vwpPlugin = new VwpPlugin();
57 |   $vwpPlugin->register();
58 | }
59 | 
60 | // Activation
61 | require_once plugin_dir_path(__FILE__)  . 'inc/vwp-plugin-activate.php';
62 | register_activation_hook( __FILE__, array( 'VwpPluginActivate', 'activate' ) );
63 | 
64 | // Deactivation
65 | require_once plugin_dir_path(__FILE__)  . 'inc/vwp-plugin-deactivate.php';
66 | register_deactivation_hook( __FILE__, array( 'VwpPluginDeactivate', 'deactivate' ) );
67 | 


--------------------------------------------------------------------------------
/webpack/loaders/babel.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   test: /\.js$/,
 3 |   exclude: /(node_modules)/,
 4 |   use: {
 5 |     loader: 'babel-loader',
 6 |     options: {
 7 |       presets: ['@babel/preset-env'],
 8 |     },
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/webpack/loaders/files.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   test: /\.(png|jpe?g|gif|svg)$/,
 3 |   use: [
 4 |     {
 5 |       loader: 'file-loader',
 6 |       options: {
 7 |         outputPath: 'images',
 8 |       },
 9 |     },
10 |   ],
11 | };
12 | 


--------------------------------------------------------------------------------
/webpack/loaders/fonts.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   test: /\.(woff|woff2|eot|ttf|svg)$/,
 3 |   use: [
 4 |     {
 5 |       loader: 'file-loader',
 6 |       options: {
 7 |         outputPath: 'fonts',
 8 |       },
 9 |     },
10 |   ],
11 | };
12 | 


--------------------------------------------------------------------------------
/webpack/loaders/index.js:
--------------------------------------------------------------------------------
1 | module.exports = [require('./babel'), require('./postcss'), require('./files'), require('./fonts'), require('./vue')];
2 | 


--------------------------------------------------------------------------------
/webpack/loaders/postcss.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 3 | 
 4 | const plugins = [require('postcss-nested')()];
 5 | 
 6 | module.exports = {
 7 |   test: /\.css$/,
 8 |   use: [
 9 |     {
10 |       loader: MiniCssExtractPlugin.loader,
11 |     },
12 |     {
13 |       loader: 'css-loader',
14 |       options: {
15 |         importLoaders: 1,
16 |       },
17 |     },
18 |     {
19 |       loader: 'postcss-loader',
20 |       options: {
21 |         plugins,
22 |       },
23 |     },
24 |   ],
25 | };
26 | 


--------------------------------------------------------------------------------
/webpack/loaders/vue.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   test: /\.vue$/,
3 |   loader: 'vue-loader',
4 | };
5 | 


--------------------------------------------------------------------------------
/webpack/plugins/browser-sync.js:
--------------------------------------------------------------------------------
 1 | const BrowserSync = require('browser-sync-webpack-plugin');
 2 | 
 3 | module.exports = new BrowserSync({
 4 |   files: ['*.php', 'inc/*.php', 'templates/**/*.php', 'public'],
 5 |   notify: {
 6 |     styles: {
 7 |       top: 'auto',
 8 |       bottom: '1rem',
 9 |       left: '1rem',
10 |       right: 'auto',
11 |       backgroundColor: 'red',
12 |       color: 'white',
13 |       width: '300px',
14 |     },
15 |   },
16 | });
17 | 


--------------------------------------------------------------------------------
/webpack/plugins/index.js:
--------------------------------------------------------------------------------
 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 2 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 3 | 
 4 | const plugins = [
 5 |   new MiniCssExtractPlugin({
 6 |     filename: 'styles.css',
 7 |   }),
 8 |   new VueLoaderPlugin(),
 9 | ];
10 | 
11 | if (process.env.NODE_ENV === 'development') {
12 |   plugins.push(require('./browser-sync'));
13 | }
14 | 
15 | module.exports = plugins;
16 | 


--------------------------------------------------------------------------------
/webpack/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const loaders = require('./loaders');
 3 | const plugins = require('./plugins');
 4 | 
 5 | const isDev = (process.env.NODE_ENV = 'development');
 6 | 
 7 | module.exports = {
 8 |   entry: {
 9 |     scripts: path.resolve(__dirname, '../src/js/index.js'),
10 |   },
11 | 
12 |   devtool: isDev ? 'inline-source-map' : false,
13 |   mode: process.env.NODE_ENV,
14 |   module: {
15 |     rules: loaders,
16 |   },
17 |   plugins,
18 |   output: {
19 |     path: path.resolve(__dirname, '../public'),
20 |     filename: '[name].js',
21 |   },
22 |   optimization: {
23 |     minimize: true,
24 |   },
25 | };
26 | 


--------------------------------------------------------------------------------