Below you will find pages that utilize the taxonomy term “Vue.js”

vue-devtools Chrome Extension in Firefox

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.

WordPress Post from Front End using REST API and Vue.js Part II

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.

WordPress Post from Front End using REST API and Vue.js

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

WordPress Post from Front End using REST API and Vue.js - Page 2

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,

Laravel JWT Auth with Vue.js 2

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.

Laravel JWT Auth with Vue.js 2 - Page 2

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.

Laravel JWT Auth with Vue.js 2 - Page 3

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 '.

Vue.js CLI Webpack Laravel Proof of Concept

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.

Laravel JWT Auth with Vue.js

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.

Laravel JWT Auth with Vue.js - Page 2

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; } .