Your Choice JavaScript News

Vue News Thursday, March 8 Netlify cms, San francisco startup, Vue component & more…

Vue News TLDR / Table of Contents

  • Let your interest be your driver
    • From the DEV community. Sharing ideas that makes us all better developers.
    • Netlify CMS, San Francisco Startup, outbound email ecoystem, open source, source CMS project
  • Compile Markdown as Vue template on Nuxt.js – Haiiro –
    • For implementing data pipeline for the static website, I used to have Markdown files for content parts from long time ago. Probably starting with Jekyll, then Middleman, Harp and Nuxt.js right now…
    • Vue component, markdown, import Vue, Markdown files, Markdown data
  • Job Listings on CodePen
    • SD Journal Best, front-end genius, Genius team, remote applicants, web designer
  • We also wanted to establish a new mailing architecture that incorporates Hugo, Heml and Netlify CMS, three awesome open source projects, to create three layers of abstractions.
  • Hugo partials come in handy to allow different templates to share reusable code, e.g., email header and footer.
  • Last but not least, integrating with Netlify CMS helped abstract away the code and allow content editors to create new email content using the existing templates.
  • One specific example is taking on the challenge of working with Netlifys open source CMS project.
  • Enabling content editors to create and edit the email templates without touching a line of code, and preview the changes in real time, gives them so much more room to help tell users a great story.

Tags: Netlify CMS, San Francisco Startup, outbound email ecoystem, open source, source CMS project

  • This template section on Vue compoent was the base idea to render Markdown on Vue component: – template – div v-html=renderedMarkdown / – /templaterenderedMarkdown is given as HTML compiled from Markdown data from JS side.
  • The HTML on Markdown does not work as Vue will be just rendered as plain HTML – h1Title/h1 – h2Sub caption=Original Caption /As a matter of course, the content of v-html is not compiled as Vues component dynamically.
  • render(this.content); – } – } – /scriptno-ssr is required to compile the HTML dynamicallyCompiled markdown should be allowed having HTMLChild ComponentUse render function by Vue.compile – script lang=ts – import Vue from vue; – import VueWithCompiler from vue/dist/vue.
  • $options.staticRenderFns = []; – for (const staticRenderFunction of compiled.staticRenderFns) { – } – } – } – /scriptCompile is bundled in vue/dist/vue – Runtime + Compiler vs. Runtime-onlyRegister components which are called in Markdown such like OriginalComponentDont have template tag as SFCCompile passed a prop as Vues template (which should…
  • Dynamic part couldnt be pre-renderedShould care about SEO for visitor without JS execution – Markdown should be rendered as template of Vue component before running Vue basically?Probably, so.

Tags: Vue component, markdown, import Vue, Markdown files, Markdown data

  • CodePen doesn’t work very well without JavaScript.
  • We’re all for progressive enhancement, but CodePen is a bit unique in that it’s all about writing and showing front end code, including JavaScript.
  • It’s required to use most of the features of CodePen.

Tags: SD Journal Best, front-end genius, Genius team, remote applicants, web designer

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.