Vue.js + WordPress

Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017

View Slide

+

View Slide

+
A L L E N M O O R E | S E N I O R F R O N T E N D E N G I N E E R

View Slide

W H E R E TO F I N D M E

View Slide

W H E R E TO F I N D M E
@creativeallen
https://allenmoore.me
https://github.com/allenmoore

View Slide


View Slide

YES, we're hiring!

View Slide

* D I S C L A I M E R S

View Slide

This is not an official endorsement for Vue.js from 10up.

View Slide

This is not an attempt to discredit other MVC Frameworks, such as
React or Angular

View Slide

This is not a declaration to use Vue.js for every project.

View Slide

JAVAS C R I P T F R A M E WO R K FAT I G U E

View Slide


View Slide

T H E R I G H T TO O L A N D F I T

View Slide

View Slide

“Just because you have access to jQuery does not mean that it should be or has to be
used.”

View Slide

– A L L E N M O O R E
“Just because you have access to jQuery does not mean that it should be or has to be
used.”

View Slide

W H AT I S V U E . J S A N D W H Y S H O U L D I C A R E ?

View Slide

“Vue (pronounced /vjuː/, like view) is a progressive framework for building user
interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up
to be incrementally adoptable.”

View Slide

W H Y ?

View Slide

W H Y ?
• Versatility

View Slide

W H Y ?
• Versatility
• Easy on-boarding

View Slide

W H Y ?
• Versatility
• Vanilla JavaScript

View Slide

W H Y ?
• Versatility
• Vanilla JavaScript
• Lack of dependency requirements

View Slide

V U E . J S I N T H E WO R D P R E S S A D M I N

View Slide

1

View Slide

1 2 $defaults = array(
3 'label' => 'Upload an Image',
4 'name' => 'cmm-image-upload',
5 'image_id' => 0,
6 'image_size' => 'thumbnail',
7 'max_uploads' => 50,
8 'type' => 'option',
9 );
10
11 $args = wp_parse_args( $args, $defaults );
12
13 $image_src = wp_get_attachment_image_src( $args['image_id'], $args['image_size'] );
14 $image_src = is_array( $image_src ) ? reset( $image_src ): '';

View Slide

1 2 wp_enqueue_script( 'media-upload' );
3 wp_enqueue_script( 'cmmis-admin-scripts' );
4
5 $images = self::getDataType( $args['type'], $args['name'] );
6 $fieldName = $args['name'];
7 $imageData = self::getImages( $images );
8 $data = [
9 'fieldName' => $fieldName,
10 'images' => $imageData,
11 'maxUploads' => $args['max_uploads'],
12 ];
13
14 wp_localize_script(
15 'cmmis-admin-scripts',
16 'cmmisImageData',
17 $data
18 );

View Slide

1 import Vue from 'vue';
2
3
4 /**
5 * Instantiate the Vue instance.
6 *
7 * @author Allen Moore
8 * @returns {void}
9 */
10 new Vue( {el: '#app'} );

View Slide

1
2
3
4 <br/>5
6
7 <br/>8

View Slide

1
2
3
4
5
6
7
8

View Slide

1
2
3 4 v-bind:value="image.id"/>
5
6
7
8
9 Edit Image
10
11
12
13 Delete Image
14
15
16
17 {{ image.name }}
18

View Slide

1
2
3
4 Add Image
5
6

View Slide

1 /* global cmmisImageData */
2 import './components/icons';
3
4 export default {
5
6 name: 'app',
7
8 data() {
9 return {};
10 },
11
12 methods: {},
13
14 mounted() {}
15 };

View Slide

1 data() {
2 return {
3 field: `${cmmisImageData.fieldName}[]`,
4 images: []
5 }
6 }

View Slide

1 methods: {
2 getImages() {
3 const images = cmmisImageData.images;
4 let image;
5
6 for ( let i = 0, len = images.length; i < len; i++ ) {
7 image = images[i];
8 this.images.push( image );
9 }
10 }
11 }

View Slide

1 methods: {
2 insertImg( frame ) {
3 const selection = frame.state().get( 'selection' ),
4 length = selection.length,
5 images = selection.models;
6 let imgData = {},
7 img,
8 imgEditLink,
9 imgId,
10 imgTitle,
11 imgUrl;
12
13 for ( let i = 0; i < length; i++ ) {
14 img = images[i];
15 imgEditLink = img.changed.editLink;
16 imgId = img.id;
17 imgTitle = img.changed.title;
18 imgUrl = img.changed.sizes.thumbnail.url;
19 imgData = {
20 edit: imgEditLink,
21 id: imgId,
22 name: imgTitle,
23 src: imgUrl
24 };
25 this.images.push( imgData );
26 }
27 }
28 }

View Slide

1 methods: {
2 openModal( event ) {
3 const self = this;
4 let frame;
5
6 if ( event ) {
7 event.preventDefault();
8 }
9 frame = wp.media( {
10 frame: 'post',
11 title: 'Choose an Image',
12 library: {
13 type: 'image'
14 },
15 multiple: true,
16 button: {
17 text: 'Select Image'
18 }
19 } );
20 frame.open();
21 frame.on( 'insert', function() {
22 self.insertImg( frame );
23 } );
24 }
25 }

View Slide

1 methods: {
2 deleteImage( img ) {
3 this.images.splice( this.images.indexOf( img ), 1 );
4 }
5 }

View Slide

1 mounted() {
2 this.getImages();
3 }

View Slide

1 import Vue from 'vue';
2 import svgicon from 'vue-svgicon';
3 import App from './App.vue';
4
5 Vue.use( svgicon, {tagName: 'svgicon'} );
6
7 new Vue( {
8 el: '#app',
9 render: h => h( App )
10 } );

View Slide

V U E . J S A N D T H E WO R D P R E S S R E S T A P I

View Slide

1

View Slide

1 const wpApiUrl = 'https://allenmoore.me/wp-json/wp/v2/posts/?_embed&per_page=5';
2
3 class DisplayPosts extends Vue {
4 constructor() {}
5 }
6
7 new DisplayPosts();

View Slide

2 getPosts( res ) {
3 this.posts = JSON.parse( res.responseText );
4
5 return this.posts;
6 }
7 }

View Slide

2 getData( res, posts = null ) {
3 const self = this;
4
5 res.open( 'GET', wpApiUrl );
6 res.onload = function() {
7 self.getPosts( res );
8 };
9 res.send();
10 }
11 }

View Slide

2 constructor() {
3 const props = {
4 el: '#app',
5 data: {posts: null},
6 created() {
7 this.fetchPosts();
8 },
9 methods: {
10 fetchPosts() {
11 const xhr = new XMLHttpRequest(),
12 self = this;
13
14 this.getData( xhr );
15 }
16 }
17 };
18
19 super( props );
20 this.posts = null;
21 }
22 }

View Slide

1
2
3
4

View Slide

1
2
3
4
5 rel="bookmark">{{ post.title.rendered }}
6
7 html="post.excerpt.rendered" itemprop="articleBody">

View Slide

Q & A

View Slide


View Slide

Vue.js + WordPress

Vue.js + WordPress

Allen Moore

More Decks by Allen Moore

Other Decks in Technology

Featured

Transcript