Vue.js

This is the last framework you’ll ever need to switch to, just like ReactJs. And Angular.

Overview

Installation
Simplest sample code
Sample templates
Sample Web Store
Vue CLI
Tutorials
Rock stars
More on front-end styling

Here is a short introduction to programming using the Vue.js JavaScript Framework.

Vue.js is a JavaScript Framework for building reactive / “progressive” components for modern web interfaces (sophisticated Single-Page Applications).

The core library is focused on the view layer only.

It allows you to write your JS, HTML, and CSS in a single file, has powerful data bindings, focuses on composability, is small, and is insanely fast.

Developers began flocking to Vue.js as a replacement React.js since 2016. This is not just for its improved speed, but for true open-source MIT licensing. Facebook’s license for React is strange and ominous for many. In 2018 Facebook “fixed” their licensing more standard, but distrust remains.

The vuejs.org/ website is built using Hexo from https://github.com/vuejs/vuejs.org, with a Chinese translation at https://github.com/vuejs/cn.vuejs.org

Evan You (@youyuxi) is the author, depending on Patreon for funding. His https://github.com/yyx990803 provides vue-devtools

https://github.com/vuejs/awesome-vue lists resources in its ecosystem

Installation

https://github.com/vuejs/vue was the single most starred repo (among all repos) on Github in 2017. That’s how popular Vue is.

Simplest sample code

From https://vuejs.org/v2/examples/

<!DOCTYPE html>
<html>
<head>
<title>VueJs Sample</title>
</head>
<body>
    <div id="root">
        <input type="text" id="input" v-model="message">
        <p>The value of the input is: .</p>
    </div>
    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                message: 'Hello World'
            }
        })
    </script>
</body>
</html>

https://unpkg.com is a CDN.

PROTIP: The URL has a hard-code version, which requires update occassionally. So get notifications. https://github.com/vuejs/vue-hackernews-2.0

Sample templates

https://stackshare.io/vuetify is a Google Material Design template using VueJs.

https://github.com/snipcart/vue-prerender-snipcart is described by https://snipcart.com/blog/vue-js-seo-prerender-example

https://github.com/snipcart/vue-blog-demo

Sample Web Store

https://www.sanity.io/blog/e-commerce-vue-nuxt-snipcartjs by Even Westvang includes use of the nuxt.js and (licensed) Sanity.io content infrastructure library. as described at https://github.com/sanity-io/example-ecommerce-snipcart-vue/blob/master/README.md#using-your-own-sanityio-data

I wrote a Bash script to install and configure it, at:

Another library is demo’d at https://vue-snipcart.netlify.com/

Vue CLI

Vue CLI 3.0 integrates with TypeScript, ESLint linting utility, and Mocha unit testing. To build a web component:

vue-cli-service build --target wc --name my-elementsrc/MyComponent.vue\
--modern

”–modern” targets modern browsers that can handle new ECMAScript.

Tutorials

https://scrimba.com/playlist/pXKqta are excellent intro programming videos and it’s free

https://www.vuemastery.com for $150/year

https://www.vuemastery.com/vueconf videos of VueConf New Orleans Mar. 27, 2018

keynote by Evan You

Pluralsight video courses:

Building Business Applications with Vue.js and MongoDB [3h 18m] 17 Jul 2018 by Mark Scott
Vue.js Fundamentals [5h 5m] 21 Jun 2018 by Jim Cooper uses https://github.com/jmcooper/vuejs-fundamentals
Vue.js: Getting Started [2h 32m] 16 Jun 2017 by Chad Campbell uses https://github.com/ecofic/course-vue-getting-started from https://www.ecofic.com/courses/vue-getting-started/
Single Page Applications with Vue.js [3h 11m] 10 Oct 2017 by Bill Stavroulakis
https://github.com/danielabar/vue-pluralsight
Build a Reading List app May 24, 2018 [1h 30m] by Hampton Paulk
https://github.com/pluralsight-projects/Vue-BookListing and
https://github.com/pluralsight-projects/Vue-BookListing-Part-2

Udemy:

Learn by Doing: Vue JS 2.0 the Right Way 12/2016 by Dejan Stošić

Rock stars

https://javascriptair.com/episodes/2016-03-30/ Taylor Otwell @taylorotwell on @JavaScriptAir by Kent C. Dodds @kentdodds

More on front-end styling

This is one of several topics:

Wilson Mar