├── .gitignore ├── README.md ├── meta.json └── template ├── .gitignore ├── README.md ├── functions.php ├── functions ├── vue_in_editor.php └── webpack_enqueue.php ├── index.php ├── screenshot.png ├── src ├── .babelrc ├── cd.command ├── components │ └── App.vue ├── index.html ├── main.js ├── npm-run-build.command ├── npm-run-dev.command ├── package.json ├── static │ └── logo.png └── webpack.config.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | test/ 2 | Icon 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ![vue-webpack-wordpress](https://github.com/shshaw/vue-webpack-wordpress/blob/master/template/screenshot.png) 2 | 3 | > A simple Vue 2.0 Webpack & `vue-loader` setup for Wordpress Themes. 4 | 5 | > This template is Vue 2.0 compatible. 6 | 7 | ### Usage 8 | 9 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). 10 | 11 | ``` bash 12 | $ npm install -g vue-cli 13 | $ vue init shshaw/webpack-wordpress my-project 14 | $ cd my-project/vue 15 | $ npm install 16 | $ npm run dev 17 | ``` 18 | 19 | ### What's Included 20 | 21 | - `npm run dev`: Webpack + `vue-loader` with proper config for source maps & hot-reload. 22 | 23 | - `npm run build`: build with HTML/CSS/JS minification. 24 | 25 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). Also check out the [breaking changes in vue-loader@9.0.0](https://github.com/vuejs/vue-loader/releases/tag/v9.0.0). 26 | 27 | ### Fork It And Make Your Own 28 | 29 | You can fork this repo to create your own boilerplate, and use it with `vue-cli`: 30 | 31 | ``` bash 32 | vue init username/repo my-project 33 | ``` 34 | -------------------------------------------------------------------------------- /meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "prompts": { 3 | "name": { 4 | "type": "string", 5 | "required": true, 6 | "label": "Project name" 7 | }, 8 | "description": { 9 | "type": "string", 10 | "required": true, 11 | "label": "Project description", 12 | "default": "A Vue.js Webpack Wordpress project" 13 | }, 14 | "author": { 15 | "type": "string", 16 | "label": "Author" 17 | }, 18 | "preprocessor": { 19 | "message": "Use a CSS pre-processor?", 20 | "type": "list", 21 | "choices": ["None", "LESS", "Sass"], 22 | "default": "None" 23 | }, 24 | "dashboard": { 25 | "message": "Use Webpack Dashboard? ( https://github.com/FormidableLabs/webpack-dashboard )", 26 | "type": "confirm", 27 | "default": false 28 | }, 29 | "local-server": { 30 | "type": "string", 31 | "label": "Local Site's dev server (MAMP) URL ( e.g. http://localhost:8888/, http://mysite.dev )", 32 | "default": false 33 | } 34 | }, 35 | "completeMessage": "{{#inPlace}}To get started:\n\n npm install\n npm run dev.{{else}}To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev.{{/inPlace}}" 36 | } 37 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | > {{ description }} 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /template/functions.php: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /template/functions/vue_in_editor.php: -------------------------------------------------------------------------------- 1 | .dev-indicator:before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; opacity: 0.2 } '; 44 | } 45 | 46 | $wp_admin_bar->add_node(array( 47 | 'id' => 'toggle-dev-button', 48 | 'title' => $indicator . 'Turn Dev Refreshing ' . ( $_SESSION['__devReload'] == true ? 'Off' : 'On' ), 49 | 'href' => '?toggleDev=' . ( $_SESSION['__devReload'] == true ? 'false' : 'true' ) 50 | )); 51 | 52 | } 53 | } 54 | add_action('admin_bar_menu', 'toggle_dev_button', 80); 55 | 56 | 57 | function vue_theme_scripts() { 58 | global $dev_server; 59 | $root = get_stylesheet_directory_uri(); 60 | 61 | if ( 62 | //is_super_admin() && 63 | !empty($_SESSION) && $_SESSION['__devReload'] ) { 64 | wp_enqueue_script('main-dev', 'http://' . $_SESSION['__devReload'] . '/assets/main.js', NULL, NULL, TRUE); 65 | } else { 66 | wp_enqueue_style( 'main', $root . '/assets/style.css', NULL, THEME_VERSION, 'all' ); 67 | wp_enqueue_script('vendor', $root . '/assets/vendor.js', NULL, THEME_VERSION, TRUE); 68 | wp_enqueue_script('main', $root . '/assets/main.js', array('vendor'), THEME_VERSION, TRUE); 69 | } 70 | } 71 | 72 | add_action( 'wp_enqueue_scripts', 'vue_theme_scripts' ); -------------------------------------------------------------------------------- /template/index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | > 8 |
9 | ' . PHP_EOL; 15 | the_title('

','

'); 16 | the_content(); 17 | echo '' . PHP_EOL; 18 | 19 | endwhile; 20 | endif; 21 | 22 | ?> 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /template/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shshaw/vue-webpack-wordpress/50885fc0e1ae4293e0fb3cfde0f6dc1e116e28c3/template/screenshot.png -------------------------------------------------------------------------------- /template/src/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /template/src/cd.command: -------------------------------------------------------------------------------- 1 | # Open vue director in Terminal 2 | cd -- "$(dirname "$BASH_SOURCE")" 3 | 4 | $SHELL -------------------------------------------------------------------------------- /template/src/components/App.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 47 | 48 | 49 | #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: 50 | grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: 51 | none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } 52 | 53 | -------------------------------------------------------------------------------- /template/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ name }} 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /template/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './components/App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /template/src/npm-run-build.command: -------------------------------------------------------------------------------- 1 | cd -- "$(dirname "$BASH_SOURCE")" 2 | npm run build 3 | # read -p "Press Return to Close..." -------------------------------------------------------------------------------- /template/src/npm-run-dev.command: -------------------------------------------------------------------------------- 1 | cd -- "$(dirname "$BASH_SOURCE")" 2 | npm run dev -------------------------------------------------------------------------------- /template/src/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ name }}", 3 | "description": "{{ description }}", 4 | "version": "0.1.0", 5 | "author": "{{ author }}", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.5.9" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.26.0", 16 | "babel-loader": "^7.1.2", 17 | "babel-preset-env": "^1.6.1", 18 | "cross-env": "^5.1.1", 19 | "css-loader": "^0.28.7", 20 | "extract-text-webpack-plugin": "^3.0.2", 21 | "file-loader": "^1.1.5", 22 | {{#if_eq preprocessor "LESS"}} 23 | "less": "^2.7.3", 24 | "less-loader": "^4.0.5", 25 | {{/if_eq}} 26 | {{#if_eq preprocessor "Sass"}} 27 | "node-sass": "^4.5.3", 28 | "sass-loader": "^6.0.6", 29 | {{/if_eq}} 30 | "optimize-css-assets-webpack-plugin": "^3.2.0", 31 | "vue": "^2.5.9", 32 | "vue-loader": "^13.5.0", 33 | "vue-template-compiler": "^2.5.9", 34 | "webpack": "^3.9.1", 35 | {{#dashboard}} 36 | "webpack-dashboard": "^1.0.2", 37 | {{/dashboard}} 38 | "webpack-dev-server": "^2.9.5" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /template/src/static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shshaw/vue-webpack-wordpress/50885fc0e1ae4293e0fb3cfde0f6dc1e116e28c3/template/src/static/logo.png -------------------------------------------------------------------------------- /template/src/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 5 | var isProduction = process.env.NODE_ENV === 'production'; 6 | 7 | {{#dashboard}} 8 | var Dashboard = require('webpack-dashboard'); 9 | var DashboardPlugin = require('webpack-dashboard/plugin'); 10 | var dashboard = new Dashboard(); 11 | {{/dashboard}} 12 | 13 | 14 | 15 | var isProduction = process.env.NODE_ENV === "production"; 16 | 17 | var loaders = { 18 | css: ["vue-style-loader", "css-loader"], 19 | {{#if_eq preprocessor "LESS"}} 20 | less: ["vue-style-loader", "css-loader", "less-loader"] 21 | {{/if_eq}} 22 | {{#if_eq preprocessor "Sass"}} 23 | sass: ["vue-style-loader", "css-loader", "sass-loader"], 24 | scss: ["vue-style-loader", "css-loader", "sass-loader"], 25 | {{/if_eq}} 26 | }; 27 | 28 | if (isProduction) { 29 | 30 | for (var key in loaders) { 31 | var fallback = loaders[key].shift(); 32 | loaders[key] = ExtractTextPlugin.extract({ 33 | use: loaders[key], 34 | fallback: fallback 35 | }); 36 | } 37 | 38 | } 39 | 40 | 41 | module.exports = { 42 | entry: './main.js', 43 | output: { 44 | path: path.resolve(__dirname, '../assets'), 45 | publicPath: 'http://localhost:8080/assets/', 46 | filename: '[name].js' 47 | }, 48 | module: { 49 | rules: [ 50 | { 51 | test: /\.css$/, 52 | use: loaders.css 53 | }, 54 | { 55 | test: /\.less$/, 56 | use: loaders.less 57 | }, 58 | { 59 | test: /\.vue$/, 60 | loader: "vue-loader", 61 | options: { 62 | loaders, 63 | esModule: false 64 | } 65 | }, 66 | { 67 | test: /\.vue$/, 68 | loader: 'vue-loader', 69 | options: { 70 | loaders 71 | } 72 | }, 73 | { 74 | test: /\.js$/, 75 | loader: 'babel-loader', 76 | exclude: /node_modules/ 77 | }, 78 | { 79 | test: /\.(png|jpg|gif|svg)$/, 80 | loader: 'file-loader', 81 | options: { 82 | name: '[name].[ext]?[hash]' 83 | } 84 | } 85 | ] 86 | }, 87 | resolve: { 88 | extensions: [".js", ".vue", ".json"], 89 | alias: { 90 | 'vue$': 'vue/dist/vue.esm.js' 91 | } 92 | }, 93 | devServer: { 94 | historyApiFallback: true, 95 | noInfo: true, 96 | headers: { 97 | 'Access-Control-Allow-Origin': '*', 98 | }{{#local-server}}, 99 | proxy: { 100 | "**": "{{ ../local-server }}" 101 | } 102 | {{/local-server}} 103 | }, 104 | performance: { 105 | hints: false 106 | }, 107 | devtool: '#eval-source-map', 108 | plugins: [ 109 | new webpack.NamedModulesPlugin(){{#dashboard}}, 110 | new DashboardPlugin(dashboard.setData){{/dashboard}} 111 | ] 112 | } 113 | 114 | if ( isProduction ) { 115 | 116 | module.exports.devtool = '#source-map'; 117 | 118 | module.exports.output.publicPath = './wp-content/themes/{{ name }}/assets/'; 119 | 120 | // http://vue-loader.vuejs.org/en/workflow/production.html 121 | module.exports.plugins = (module.exports.plugins || []).concat([ 122 | new webpack.DefinePlugin({ 123 | 'process.env': { 124 | NODE_ENV: '"production"' 125 | } 126 | }), 127 | new webpack.optimize.UglifyJsPlugin({ 128 | sourceMap: true, 129 | compress: { 130 | warnings: false 131 | } 132 | }), 133 | new webpack.LoaderOptionsPlugin({ 134 | minimize: true 135 | }), 136 | // extract css into its own file 137 | new ExtractTextPlugin('style.css'), 138 | // Compress extracted CSS. We are using this plugin so that possible 139 | // duplicated CSS from different components can be deduped. 140 | new OptimizeCSSPlugin(), 141 | // split vendor js into its own file 142 | new webpack.optimize.CommonsChunkPlugin({ 143 | name: 'vendor', 144 | minChunks: function (module, count) { 145 | // any required modules inside node_modules are extracted to vendor 146 | return ( 147 | module.resource && 148 | /\.js$/.test(module.resource) && 149 | module.resource.indexOf( 150 | path.join(__dirname, './node_modules') 151 | ) === 0 152 | ) 153 | } 154 | }) 155 | ]) 156 | } 157 | -------------------------------------------------------------------------------- /template/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Theme Name: {{ name }} 3 | Theme URI: 4 | Author: {{ author }} 5 | Author URI: 6 | Description: {{ description }} 7 | Version: 0.0.1 8 | License: GNU General Public License 9 | */ --------------------------------------------------------------------------------