Your Choice JavaScript News

Vue News Saturday, March 3 Content fields, Case studies, Token delete request & more…

Vue News TLDR / Table of Contents

  • Building a Serverless CMS Powered by Vue.js
    • In this tutorial, you’ll learn how to build a serverless Vue.js application using ButterCMS. ButterCMS is a headless CMS and blogging platform that lets you build CMS-powered apps using any programming language, including Vue.
    • content fields, case studies, , ,
  • Authentication Best Practices for Vue
    • Learn how to easily implement authentication in your Vue.js application. You will learn how to isolate auth logic from the app and other libraries, handle unauthenticated API calls, have auto authentication, have restricted routes access and more. Implement authentication in your Vue.js app today.
    • token DELETE request, user token session, CSRF, authorization Axios header, client-side token-based authentication
  • Get going with Node.js, npm and Vue.js 2 on Red Hat & Oracle Linux
    • inaccessible proxy server, Oracle Enterprise Linux, Enterprise Linux platform, local browser, single HTML document
  • Building a Serverless CMS Powered by Vue.js
    • Building a Serverless CMS Powered by Vue.js
    • content fields, case studies, case study, customer case studies, serverless Vue.js application
  • Specifically, well examine code samples for three content types we might find on a marketing website: customer case studies, frequently asked questions, and blog posts.
  • Using the dashboard on ButterCMS, you can create a page type entitled Customer Case Study and define the content fields.
  • To do so, in we define a method to get a particular customer page based on its slug: – – And, just like you did for the case studies homepage, you need to display the content by defining a template and calling the content fields you want to show: -…
  • First, set up a route to your page: – – Then create with a call to get the content from the API: – – Notice that we predefined as and then updated it with the API call to the content fields.
  • To create your blog homepage that displays the most recently published posts, youll create a Vue component for the blog home in a new file: – – If you have been following along with the previous examples, then you may start to see a pattern here and know that you…

Tags: content fields, case studies, , ,

  • Lets now look at this auth module: – – We will have the token field (using local storage stored token if present) and a status field, representing the status of the API call ( , or ).
  • By having this getter, youseparate data from app logic making it futur proof – – A fairly simple API call from a module.
  • You can also add a token DELETE request in your action to delete your user token session when logging out.
  • Now after login, all the Axios calls have the authorization header set to your token.
  • Note 1: If you do not wish to use Vuex, you can still check for token presence in the local storage rather than looking at the store getters – – Note 2: Ed @posva, maintainer of vue-router also advises the usage of meta attributes, check it out – – …but…

Tags: token DELETE request, user token session, CSRF, authorization Axios header, client-side token-based authentication

  • A quick and rough guide on getting going with Node, npm and Vue.js 2 on a Enterprise Linux platform (Oracle Linux based on RedHat Linux) – – Now again as the [normal]development user: – – create and run your first Vue.js application – – A single HTML document that loads…
  • One that is to my liking is Microsoft Visual Studio Code free, light weight, available on all platforms.
  • See for installation instructions: turn the application simplistic as it is into a shippable, deployable application, we can use the build feature of webpack: – – The built resources are in the /dist folder of the project.
  • These resources can be shipped and placed on any web server, such as nginx, Apache, Node.js and even WebLogic (co-located with Java EE web application).
  • prod.conf.js, for example to have the name of the application included in the name of the generated resources:

Tags: inaccessible proxy server, Oracle Enterprise Linux, Enterprise Linux platform, local browser, single HTML document

  • Specifically, well examine code samples for three content types we might find on a marketing website: customer case studies, frequently asked questions, and blog posts.
  • Using the dashboard on ButterCMS, you can create a page type entitled Customer Case Study and define the content fields.
  • To do so, in we define a method to get a particular customer page based on its slug: – – And, just like you did for the case studies homepage, you need to display the content by defining a template and calling the content fields you want to show: -…
  • First, set up a route to your FAQ page: – – Then create with a call to get the FAQ content from the API: – – Notice that we predefined as and then updated it with the API call to the FAQ content fields.
  • To create your blog homepage that displays the most recently published posts, youll create a Vue component for the blog home in a new file: – – If you have been following along with the previous examples, then you may start to see a pattern here and know that you…

Tags: content fields, case studies, case study, customer case studies, serverless Vue.js application

Top Vue Courses

Vue JS 2: From Beginner to Professional (includes Vuex) (1,798 students enrolled)

By Bo Andersen
  • How to build advanced Vue.js applications
  • How to build single page applications (SPA)
  • Understand the theory and how Vue works under the hood
  • How to manage state in large applications with Vuex
  • Communicating with servers with HTTP
  • Use modern tools for developing and building applications (e.g. webpack)

Learn more.


Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) (38,295 students enrolled)

By Maximilian Schwarzmüller
  • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Understand the Theory behind Vue.js and use it in Real Projects
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)

Learn more.


The Ultimate Vue JS 2 Developers Course (3,882 students enrolled)

By Anthony Gore
  • Understand all Vue concepts from beginner to advanced
  • Build three real world applications using Vue.js utilising every Vue feature
  • Use the Vuex statement management library
  • Write basic Vue with ES5 and also modern Vue with ES6
  • Setup VueJS environment with development tools including Webpack
  • Create a universal application with server-side rendering
  • Use popular plugins from the Vue ecosystem like vue-router and vue-resource
  • Cutting-edge features like Single File Components, Render functions and Server-Side Rendering

Learn more.


Vue JS 2.0 - Mastering Web Apps (52,495 students enrolled)

By David Katz
  • Build entire Vue JS, VueRouter, and Vuex applications from scratch.
  • Develop apps that deal with APIs and web requests.
  • Create web apps with a full authentication service, and real-time database.

Learn more.


Learn by Doing: Vue JS 2.0 the Right Way (1,437 students enrolled)

By Dejan Stošić
  • Build your own VueJS application of any size
  • Plan and structure your project
  • Write maintainable code
  • Use smart development tools like vue-cli

Learn more.