├── .babelrc
├── README.md
├── assets
├── js
│ └── app
│ │ ├── app.js
│ │ └── components
│ │ └── welcome.vue
└── scss
│ ├── app
│ └── app.scss
│ └── vendor
│ └── vendor.scss
├── footer.php
├── functions.php
├── gulpfile.js
├── header.php
├── index.php
├── package.json
├── postcss.config.js
├── public
├── css
│ ├── app.css
│ └── vendor.css
└── js
│ ├── app.js
│ └── vendor.js
├── style.css
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["es2015"]
4 | ]
5 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WordPress starter theme with Vue.js integrated.
2 | This theme pretty much includes only a way to compile your assets with Vue code.
3 | It's meant for you to learn Vue inside WordPress, or to create your own theme.
4 | It includes an example component.
5 | I'm using Gulp+Webpack to compile the assets. Gulp handles the CSS and running Webpack, while Webpack handles JS.
6 |
7 | There are packages you would probably want to use such as axios, vuex, etc. I would leave them to you to install.
8 |
9 | Clone the theme, run ```npm install``` and start playing.
10 |
11 | Make sure to modify the BrowserSync proxy link inside the gulpfile.js.
12 |
13 | ## Commands
14 | 1. ``` gulp ``` Will compile, start BrowserSync and watch for any changes.
15 | 2. ``` gulp production ``` Will compile and minify assets.
16 |
17 | ## Vue devtools
18 | Download it [here](https://github.com/vuejs/vue-devtools#vue-devtools)
19 |
--------------------------------------------------------------------------------
/assets/js/app/app.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import welcome from './components/welcome.vue';
3 |
4 | window.Vue = Vue;
5 |
6 | Vue.component('welcome', welcome);
7 |
8 | const app = new Vue({
9 | el: '#app',
10 | });
11 |
12 |
13 |
--------------------------------------------------------------------------------
/assets/js/app/components/welcome.vue:
--------------------------------------------------------------------------------
1 |
2 | Welcome to WordVue
3 |
4 |
5 |
12 |
13 |
--------------------------------------------------------------------------------
/assets/scss/app/app.scss:
--------------------------------------------------------------------------------
1 | #app {
2 | h1 {
3 | font-size: 60px;
4 | text-align: center;
5 | background: -webkit-linear-gradient(#41B883, #35495E);
6 | -webkit-background-clip: text;
7 | -webkit-text-fill-color: transparent;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/assets/scss/vendor/vendor.scss:
--------------------------------------------------------------------------------
1 | //Include here any css libraries
--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
1 |
2 |