Wilson Mar bio photo

Wilson Mar

Hello. Hire me!

Email me Calendar Skype call 310 320-7878

LinkedIn Twitter Gitter Google+ Instagram Youtube

Github Stackoverflow Pinterest

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


Overview

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

Pluralsight video courses:

Udemy:

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:

  1. Text Editors
  2. Markdown text for GitHub from HTML
  3. 508 Accessibility

  4. JAM Stack Website Project Plan
  5. HTTP/2 Transition Project Plan
  6. Static websites
  7. Jekyll Site Development

  8. Website styles
  9. Website Styling
  10. VueJs front-end framework

  11. Email from website
  12. Search within Hyde format Jekyll websites
  13. Windows Tile Pin Picture to Website Feed

  14. Data Visualization using Tableau