Merge pull request #32 from code-soup/dev-v

vuejs support

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [1.0.1] - 2021-09-22
+
+### Added
+
+- This CHANGELOG file to hopefully serve as an evolving example of a
+  standardized open source project CHANGELOG.
+- Support for Vue.js components, does not include VueX (Documentation to follow)
+- Minimum node version is now 14.x
+

README.md

@@ -1,5 +1,5 @@
 ## WordPress Plugin Boilerplate
-This is simplified fork of [WordPress Plugin Boilerplate](https://github.com/DevinVinson/WordPress-Plugin-Boilerplate).
+2021 verision of [WordPress Plugin Boilerplate](https://github.com/DevinVinson/WordPress-Plugin-Boilerplate).
 Includes a Webpack build script and webpack-dev-server for local development.
 Integrates PHP namespacing and PSR-4 autoloader for better experience.
 
@@ -18,6 +18,7 @@ Plugin documentation with instalation instruction and best practices can be foun
 * Stylelint
 * ES6 with Babel for JavaScript
 * ESLint
+* [Vue.js](https://vuejs.org/) support (without VueX)
 * [Webpack 5](https://webpack.github.io) build script for frontend and wp-admin assets
 * [Webpack dev server](https://github.com/webpack/webpack-dev-server) with live reloading and HMR
 * PSR-4 Autoloader
@@ -29,7 +30,7 @@ Make sure all dependencies have been installed before moving on:
 * [WordPress](https://wordpress.org/) >= 4.7
 * [PHP](http://php.net/manual/en/install.php) >= 7.2
 * [Composer](https://getcomposer.org/download/)
-* [Node.js](http://nodejs.org/) >= 12.6.x
+* [Node.js](http://nodejs.org/) >= 14.x
 * [Yarn](https://yarnpkg.com/en/docs/install)
 
 

index.php

@@ -11,7 +11,7 @@
  * Plugin Name:       WordPress Plugin Boilerplate
  * Plugin URI:        https://github.com/code-soup/wordpress-plugin-boilerplate
  * Description:       WordPress Plugin Boilerplate with webpack build script, composer autoloader and namespacing
- * Version:           1.0.0
+ * Version:           1.0.1
  * Author:            Code Soup
  * Author URI:        https://www.codesoup.co
  * Contributors:      bobz, brbs, Kodelato

package.json

@@ -55,7 +55,7 @@
         "babel-loader": "^8.2.2",
         "breakpoint-sass": "^2.7.1",
         "clean-webpack-plugin": "^4.0.0",
-        "css-loader": "^6.2.0",
+        "css-loader": "^6.3.0",
         "cssnano": "^5.0.8",
         "dart-sass": "^1.25.0",
         "eslint": "^7.32.0",
@@ -69,25 +69,28 @@
         "import-glob": "^1.5.0",
         "jquery": "^3.6.0",
         "mini-css-extract-plugin": "^2.3.0",
-        "postcss": "^8.3.6",
+        "postcss": "^8.3.7",
         "postcss-loader": "^6.1.1",
         "postcss-preset-env": "^6.7.0",
         "resolve-url-loader": "^4.0.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.41.1",
+        "sass": "^1.42.1",
         "sass-loader": "^12.1.0",
-        "style-loader": "^3.2.1",
+        "style-loader": "^3.3.0",
         "stylelint": "^13.13.1",
         "stylelint-config-property-sort-order-smacss": "^7.1.0",
         "stylelint-order": "^4.1.0",
         "stylelint-webpack-plugin": "^3.0.1",
         "svg-spritemap-webpack-plugin": "^4.3.2",
+        "vue": "^2.6.14",
+        "vue-loader": "^16.7.0",
+        "vue-resource": "^1.5.3",
+        "vue-template-compiler": "^2.6.14",
         "webpack": "^5.53.0",
         "webpack-assets-manifest": "^5.0.6",
         "webpack-cli": "^4.8.0",
         "webpack-dev-server": "^4.2.1",
         "webpack-merge": "^5.8.0",
         "yargs": "~17.1.1"
-    },
-    "dependencies": {}
+    }
 }

src/webpack/options/module.js

@@ -36,6 +36,13 @@ module.exports = {
             include: config.paths.src,
             loader: 'import-glob',
         },
+        {
+            test: /\.vue$/,
+            loader: 'vue-loader',
+            options: {
+                loaders: {},
+            },
+        },
         {
             test: /\.js$/,
             exclude: [/node_modules/],

src/webpack/options/plugins.js

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 
 const MiniCssExtractPlugin   = require('mini-css-extract-plugin');
 const SVGSpritemapPlugin     = require('svg-spritemap-webpack-plugin');
+const VueLoaderPlugin        = require("vue-loader/lib/plugin");
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = [
@@ -24,4 +25,5 @@ module.exports = [
         jQuery: 'jquery',
         'window.jQuery': 'jquery',
     }),
+    new VueLoaderPlugin(),
 ];