Prerequisite Node.js will need to be installed. This include the npm CLI. Pro Tips: Use nvm for Node.js installation. If running Windows, use WSL2 with Windows Terminal. Getting Started The most common practice for creating a Vue.js application is done using the Vue CLI. Install Vue CLI npm install -g @vue/cli For more information, refer to the official Vue CLI Installation Guide. vue create myvueapp cd myvueapp Frameworks Of the various Vue.

When I wrote this post in March, only a Chrome vue-devtools extension was available. Using the Chrome Store Foxified add-on, this post documents installing the vue-devtools Chrome extension into Firefox for debugging Vue.js applications. However, as of June 20, an official Firefox Addon is available.

The objective of this post is to demonstrate some Vue.js basics for working with the WordPress REST API. This post continues where the last post left off with the following additions.

This post is a simple proof of concept for using the new WordPress REST API to submit a new post draft from the front end. The form and user inputs are built using the Vue.js framework and vue-cli to create a simple Webpack build configuration. Demo on YouTube

Webpack Vue.js CLI Use vue-cli to download vuejs, webpack and template dependencies and create the project in the root of our plugin folder. Navigate to the wp-content/plugins directory. Update or install globally as needed. # update npm update -g vue-cli # or install npm install -g vue-cli Change to the wordpress plugins directory and use vue-cli to install the webpack-simple template into the new wp-api-vuejs-poc folder. For example,

This post is a refresh of Laravel JWT Auth with Vue.js I posted in September that applies to the 1.x version of Vue.js. Evan You released vue.js version 2 shortly thereafter and this post will cover building the Laravel JSON Web Token based authentication with it.

Vue Resource In order to post the Registration form data, the Vue.js resource plugin needs to be installed. npm i vue-resource --save-dev Update resources/js/app.js to import the vue-resource plugin after the vue-router. Add the Vue.use statement for the vue-resource. Add the Vue.http.headers and Vue.http.options.root url. Laravel VerifyCsrfToken middleware will check for the X-CSRF-TOKEN request header. To make this token available to the client side script, it is being stored in the csrf-token meta tag near the top of the web page.

Sign in Form Add the following code to the Signin.vue file. Signin.vue <template> <div> <div class="alert alert-danger" v-if="error"> <p>There was an error, unable to sign in with those credentials.</p> </div> <form autocomplete="off" v-on:submit="signin"> <div class="form-group"> <label for="email">E-mail</label> <input type="email" id="email" class="form-control" placeholder="gavin.belson@hooli.com" v-model="email" required> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" class="form-control" v-model="password" required> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </div> </template> <script> import auth from '../js/auth.js'; export default { data() { return { email: null, password: null, error: false } }, methods: { signin(event) { event.

This post is a simple proof of concept for using vue-cli to scaffold a Webpack Laravel project. The production build modifies the default Laravel blade view and outputs the built assets into the public/static directory. The development workflow demonstrates hot reloading and css style extraction.

This post documents using Laravel to build JSON Web Token based authentication with a Vue.js 1.0 user interface. UPDATE: vue.js 2.0 version published.

API For form validation, create a FormRequest class. Use the command line and the php artisan make command to generate the class as follows. php artisan make:request RegisterFormRequest Edit app/Http/Requests/RegisterFormRequest.php. First, return true instead of false in the authorize function since using JWT for that. Then add the validation rules in the array that is returned in the rules function for the new User as follows. RegisterFormRequest.php public function authorize() { return true; } .