├── .babelrc
├── .gitignore
├── README.md
├── assets
├── js
│ ├── app.js
│ └── components
│ │ └── welcome.vue
└── scss
│ ├── app.scss
│ └── vendor.scss
├── footer.php
├── functions.php
├── 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 | ["env"]
4 | ]
5 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | **.DS_Store*
--------------------------------------------------------------------------------
/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 Webpack to compile the assets. I added webpack-dev-server and HMR to avoid page reload on asset change.
6 | I also added browserSync for auto reloading on PHP file change.
7 |
8 | There are packages you would probably want to use such as axios, vuex, etc. I would leave them to you to install.
9 |
10 | Clone the theme, run ```npm install``` and start playing.
11 |
12 | Make sure to modify the BrowserSync proxy link inside the webpack.config.js.
13 |
14 | ## Note
15 | webpack-dev-server serves assets from memory, which means that on development mode we would have to include asset files from
16 | ``` http://localhost:8080/[name].css ``` and ``` http://localhost:8080/[name].js ```.
17 | When you switch to production you remove these links and remove the comment tags from the asset links to the current directory.
18 | I added comments in the functions.php file to make it more clear.
19 |
20 | Keep in mind that you need to run ``` npm run dev ```, otherwise you would get 404 on the development asset links.
21 |
22 | ## Commands
23 | 1. ``` npm run build ``` Will compile and minify assets for produciton.
24 | 2. ``` npm run build:dev ``` Will compile assets.
25 | 3. ``` npm run dev ``` Will compile and start webpck-dev-server and browserSync.
26 |
27 | ## Vue devtools
28 | Download it [here](https://github.com/vuejs/vue-devtools#vue-devtools)
29 |
--------------------------------------------------------------------------------
/assets/js/app.js:
--------------------------------------------------------------------------------
1 | import '../scss/app.scss';
2 |
3 | import Vue from 'vue';
4 | import welcome from './components/welcome.vue';
5 |
6 | window.Vue = Vue;
7 |
8 | Vue.component('welcome', welcome);
9 |
10 | const app = new Vue({
11 | el: '#app',
12 | });
13 |
14 |
--------------------------------------------------------------------------------
/assets/js/components/welcome.vue:
--------------------------------------------------------------------------------
1 |
2 | Welcome to WordVuePack
3 |
4 |
5 |
12 |
13 |
--------------------------------------------------------------------------------
/assets/scss/app.scss:
--------------------------------------------------------------------------------
1 | #app {
2 | h1 {
3 | font-size: 60px;
4 | text-align: center;
5 | background: -webkit-linear-gradient(#41B883, #35495E, #1D74B0);
6 | -webkit-background-clip: text;
7 | -webkit-text-fill-color: transparent;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/assets/scss/vendor.scss:
--------------------------------------------------------------------------------
1 | //For your css libraries, such as bulma, bootstrap, foundation, erc.
--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |