Learn Vue.js for free

9 interactive screencasts to take you from beginner to advanced

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <script>
    
    // console.log("Hello, Vue! πŸŽ‰")
    
    // this is a single-line comment
    
    /*
      this is a multiline comment
    */
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    /* resets */
    * { color: inherit; }
    input { font: inherit; border: unset; background: unset; }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	font: 1rem/1.175 "BlinkMacSystemFont", -apple-system, "Roboto", sans-serif;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	font: 1rem/1.175 "BlinkMacSystemFont", -apple-system, "Roboto", sans-serif;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	font: 1rem/1.175 "BlinkMacSystemFont", "Roboto", sans-serif;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	font: 1rem/1.175 "BlinkMacSystemFont", -apple-system, "Roboto", sans-serif;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	--white      : #ffffff;
    	--orange     : #ff691f;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
    		<link rel="stylesheet" href="css/debug.css">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    		<style>
    
    :root {
    	/* colors */
    	--white      : #ffffff;

Learn the hottest new JavaScript framework in less than an hour!


Vue is a newer and refreshing framework for building web apps with at least an order of magnitude more ease than writing vanilla HTML, CSS and JavaScript. Vue frees our data from the DOM, and provides an idiomatic guide to programming JavaScript, making development much faster and more fun.

The library is great for composing both static websites and dynamic web apps, and so learning it is central to building modern products and services.

This course covers the minimum JavaScript needed to get started with Vue, the basics of Vue, and two more advanced examples that build on the ideas discussed and focus on fixing some aspect of the existing codebase. Throught nine interactive screencasts, it aims to both help and inspire you.

You can reach out to the course creator via Twitter: @username_ZAYDEK.

What people are saying about Scrimba: