wordpress-day-spa
Example of a Vue.js-powered SPA running in the WordPress Admin with vue-router and vue-loader.
project structure
-
package.json
- defines dependencies -
webpack.config.js
- defines codesplitting and compile processes -
app/src/wds.core.js
- main app scaffolding with dependency-injection, component registration, route config and script that mounts the app. -
app/src/WDS.vue
- main app template injected onto page containing the<router-link>
and<router-view>
components. -
app/assets/js/wds.app.bundle.js
- main bundle containing CSS, JS and HTML to render -
app/assets/js/wds.lib.bundle.js
- main bundle containing vue, vue-router, axios and other libraries. -
app/admin/class-spa.php
registers the dashboard page with wordpress, enqueues bundles and contains the HTML markup used by the app to mount.
using the project
-
npm install
to bring down dependencies -
npm run dev
to generate the bundles plus watch files and recompile on change -
npm run build
to generate small, minified production assets
how it works
- Work on your SPA in
app/src
. - Execute
npm run dev
to use webpack to watch those files for changes and place compiled bundles inapp/assets/js
. vue-loader
andbabel
helpwebpack
translate the Single Component.vue
files into native JavaScript that builds DOM nodes, contains script and CSS all in a unified file (webpack can be used to split all CSS into a single file as well).- When the dashboard page is loaded, the bundles containing libraries and the app itself are enqueued and the app script is "localized" with a WP-API nonce and other supporting metadata.
- The app latches onto the
<div id="app"></div>
and Vue renders the application.vue-router
by default uses hash navigation, which can be used to launch directly into a screen within the app.
spa dependency injection
babel and vue-loader allow us to use import
and export
within our .vue
files to handle dependencies.
All third-party dependencies and custom components are managed in the app/src/wds.core.js
file.
Adding a new component
- Create your new
.vue
file with a<template type="text/babel"></template>
and a<script type="text/babel"></script>
- In the
<script>
definition,import Vue from
from ourwds.core.js
file in the component. This makes all other dependencies available. - In the
<script>
definition,export
with a new component definition. Example. import YourNewComponent from
the location in your directory in thewds.core.js
file.- Set a
Vue.component( 'your-component-elem', YourNewComponent )