Vue News Tuesday, January 30
Vue News TLDR / Table of Contents
- Building Vue.js Apps with Parcel ← Alligator.io
- Do you have a soft spot for zero-config module bundlers? Tired of configuring webpack? Take a look here at how to build your Vue.js apps with ParcelJS instead!
- Parcel out-of-the box, perfectly bundled app, in-depth Parcel guide, official Parcel documentation, alternative module bundler
- What’s new in Vue Devtools 4.0 – The Vue Point – Medium
- A big update was released to the Vue devtools just a few days ago. Let’s dive into the new features and improvements! 🎄 The content of the field is the serialized JSON value. For example, if you…
- vue devtools, Component inspector pane, big update, ‘Format component names, default horizontal mode
- Using Chart.js with Vue.js ← Alligator.io
- How to use the popular Chart.js library with the Vue.js framework to build simple HTML5 charts.
- data, chart, Vue component, Vue component slim, different chart types
- How to build a simple blog using Vue, Cosmic JS and deploy to Netlify
- Cosmic JS is a cloud-hosted content platform that offers a flexible and intuitive CMS API. Build websites and applications with more freedom and manage content easier. Get started for Free.
- Cosmic JS, cosmic js hosting, Cosmic JS API, Integrate Cosmic JS, Cosmic JS bucket
- wrapper around material-components-web for Vue.js – Laravel VueJs
- wrapper around material-components-web for Vue.js in Laravel, Laravel & VueJs, VueJs
- mdc-web vanilla components, template und pass, CSS custom properties, maximal customization, SASS file
- How I learned Vue
- How I dived into Vue
- great user experience, JS frameworks, vue watcher, asynchronous nature, power Nodejs
- long-awaited support, Premium plans, testing phase, new languages, relevant documentation
- The Taste of Media Streaming with Flask
- A journey from hardly serving an 8 min song to instantly streaming 5 hour jukeboxes in AnyAudio
- YouTube, partial content, media, server, YouTube video
- Server Side Rendering Vue apps with Nuxt is super awesome. It takes a bit of configuration, but after the initial setup you have an excellent SSR build pipel…
- upload original content, YouTube, videos, music, friends
- VueConf US 2018 – March 26–28, 2018 in New Orleans, USA
- Official Vue.js Conference USA
- historic New Orleans, Lightning talks, best presentations, Workshop details, favorite Vue.js
Tweeted At: Mon Jan 29 21:28:00 +0000 2018
Author: Joshua Bemenderfer
- The canonical way to build & bundle a Vue.js application is with webpack, and indeed, pretty much everything Vue-related assumes that you’ll be using webpack.
- So, let’s take a look at how to set up parcel for a Vue.js app.
- In contrast to our usual steps, let’s go ahead and set up the skeleton app files before we do anything else.
- First, let’s install everything we need for the Vue app itself.
- For more information about built-in asset types, take a look at the official Parcel documentation.
Tweeted At: Mon Jan 29 14:58:01 +0000 2018
Publish Date: 2018-01-15T15:14:03.429000+00:00
Author: Guillaume CHAU
- However, some values like undefined or NaN can be typed directly for more convenience.More types will be supported in future releases!Quick EditSome types of value can be edited in a single click with the âQuick Editâ feature.Booleans can be toggled directly with the checkbox icon:Numbers can be incremented or decremented…
- Follow this setup guide (if you are using Nuxt, you donât need to do anything)In the Component inspector, mouse over the component nameâââyou should see a tooltip with the file pathClick on the component name and it will open in your editorShow the original component namesPR by manicoBy default, all…
- Type followed by the name of the component or part of it:Vuex inspector filterPR by bartlomiejuThe Vuex inspector has now a filter input:Vertical layoutPR by crswllWhen the devtools are not wide enough, they will now switch to an handy vertical layout.
- Instead, you need to click the new âScroll into viewâ icon:Click on the eye icon to scroll to the componentIt will now center the component on the screen.Collapsible inspectorsThe sections of the different inspectors can now be collapsed.
- This is very useful if you are, letâs say, only interested in the mutations details of the Vuex tab.And more!The âInspect DOMâ button is now hidden if the environment doesnât have this featureâââby michalsnik-Infinity is now supportedâââby David-DesmaisonsThe event hook had an issue fixed by maxushuangSome code was cleaned by…
Tweeted At: Mon Jan 29 16:49:16 +0000 2018
Author: Dave Berning
- In it’s simplest form, each chart has the same basic structure: – – You can start by adding your data to this object and keep repeating that process for each new chart you want to create.
- So let’s use ES6 to our chart’s data, in order to keep our Vue component slim and focused.
- You can have several data objects in this file for different charts – – Note: You can reference Chart.js’ documentation for more information about line charts, as well as others like , , , , and .
- At this point, Chart.js should be installed and the chart’s data should be imported into the component.
- In the object, you also created a function that creates the chart object with data from the file.
Tweeted At: Mon Jan 29 15:00:02 +0000 2018
- In this tutorial, I’m going to show you how to create a simple but amazing blog using Vue, Vuex, Cosmic JS and deploy to Netlify.
- First of all, replace package.json with this: – – Open the folder in Terminal and do After doing that, we need to setup Cosmic JS configuration in order to communicate with API.
- As this blog application is static, so if you want to deploy it to Cosmic JS hosting you need to create a simple Node.js Express server.
- Go to your bucket in Cosmic JS dashboard and click Settings->Deploy Web App.
- This is a simple blog app built using vue, vuex, and Cosmic JS.
Tweeted At: Mon Jan 29 15:59:18 +0000 2018
Publish Date: 2018-01-29T14:58:40+00:00
- Material components for Vue.js – Material-components-vue integrates the mdc-web vanilla components following the simple approach.
- main goals – – decoupled components – can be cherry picked!
- implementing just the specs not more or less – keep the components as simple as possible (KISS, DRY) – keep in sync with changes in the mdc-web repository – – installation – npm install –save material-components-vue – – yarn add – – – – – – – – – Example…
- import all components – import MaterialComponentsVue from pick components – import Button from Card from the SASS file in the root component of app for maximal customization.
- $mdc-theme-primary: #2196f3; – $mdc-theme-secondary: #ff1744; – $mdc-theme-background: #f5f5f5; – @import @import @import @import custom properties – Integrate a theme component in your template und pass in an object with CSS custom properties, but keep browser compatibilty in mind.
Tweeted At: Mon Jan 29 21:55:10 +0000 2018
Author: Justin Follow
- I am web developer that is about leaving PHP for Js – – I have recently heard the power Nodejs posses on the web; the asynchronous nature of it.
- The Devcenter community on Slack has vibrant participants who are willing to help for any questions one might have – – Found it somewhat challenging working with vue watcher and computed method.
- Working with Vue makes your web app to function smartly and delivers great user experience for your users.
Tweeted At: Mon Jan 29 21:58:36 +0000 2018
Publish Date: 2018-01-29T21:18:43+00:00
- Following the beta, new languages are available to Solo, Startup and Premium plans, and to those who helped during the testing phase.
- Extended language support will enable you to use StyleCI for more of your codebase, making code reviews even easier.
Tweeted At: Tue Jan 30 07:00:05 +0000 2018
- For every media request made to the server, the first thing done is fetching the media from YouTube servers (see line 1 in the code above).
- Earlier, every request of media made to the server resulted in downloading the whole audio from YouTube before serving any.
- Here is a piece of code that explains the process — – – By putting the header with the request made to YouTube, the amount of data that the server needs to download before serving it to the client becomes less.
- The client doesn’t get a response from the server unless the server has downloaded the partial data from YouTube and the response has been prepared and sent.
- Though this is nowhere compared to the requests made to YouTube from the same client (around 15ms), it is an achievement for a hobby project with a cheap server.
Tweeted At: Mon Jan 29 23:30:00 +0000 2018
Tweeted At: Tue Jan 23 18:50:32 +0000 2018
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)
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)
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
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 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