Top Rating
- Top Contributors
  Discover the Top Open Source contributors by country or by language
- Interviews
  Discover real stories from Open Source developers
Discover

Discover your Favorite Language
Discover the top trending repositories and projects on Github. Explore the latest trends in your preferred languages.

C

Haskell

C++

OCaml

Groovy

Erlang

Crystal

Nix

More Languages
Awesome

Awesome repositories
Discover the most awesome repositories and projects of your favorite languages. Inspired by the Awesome-* lists trend in GitHub.

Dart

Rust

Swift

F#

Java

Erlang

C++

Elixir

More Languages
By Country

Rankings by Country
Discover the community of talented open source contributors in each country.

🇹🇴 Tonga

🇰🇵 North Korea

🇸🇷 Suriname

🇧🇪 Belgium

🇭🇷 Croatia

🇳🇱 Netherlands

🇵🇦 Panama

🇲🇿 Mozambique

All Countries Compare Countries

sdras/animated-guide-vue3

Stars
154
Rank 242,095 (Top 5 %)
Language
Created almost 5 years ago
Updated almost 5 years ago

sdras/animated-guide-vue3

sdras

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

An Animated Guide to Vue 3

Reactivity and Internals

Animated demos:

All demos are created with JS, and are code you can fork and explore, listed here in order

Talk:

(In this repo)

reactivity-vue3

awesome-actions

A curated list of awesome actions to use on GitHub

cssgridgenerator

🧮 Generate basic CSS Grid code to make dynamic layouts!

night-owl-vscode-theme

🌌 NIGHT OWL: A VS Code dark theme for contrast for nighttime coding, 🦉 LIGHT OWL: a daytime light theme

intro-to-vue

Workshop Materials for my Introduction to Vue.js Workshop

array-explorer

⚡️ A resource to help figure out what JavaScript array method would be best to use at any given time

page-transitions-travelapp

Travel App, Native-like Page Transitions

ecommerce-netlify

🛍 A JAMstack Ecommerce Site built with Nuxt and Netlify Functions

object-explorer

🔥 A resource to help figure out what JavaScript object method would be best to use at any given time

vue-vscode-snippets

These snippets were built to supercharge my workflow in the most seamless manner possible.

sample-vue-shop

See readme for newer repo details! A sample shop that shows how to manage payments with Vue, Stripe, and Serverless Functions

svg-workshop

Materials for SVG Essentials & Animation Course

career-ladders

A sample of career ladders I use for my organization, open sourced for anyone.

design-for-developers

Design for Developers Workshop

hero-generator

🦸🏻‍♀️Hero Generator! Create a nice hero image for your site or app

project-explorer

🎋A CLI tool to create an annotated tree visualization of any project

vue-sample-svg-icons

An opinionated example of how to use SVG icons in a Vue.js application

js-explorer

Find the method you need without digging through the docs, directly on the command line!

building-web-apps-with-vue

building-web-app-with-vue

vue-vscode-extensionpack

The extensions I use when developing a Vue application with VS Code

JS-stroll

Rewriting code from other languages or other technologies into Vanilla JS and SVG for fun and practice.

frontendmasters-svganimation

Frontend Masters- Advanced SVG Animation Course

vue-weather-notifier

A small SVG animation illustrating a weather app notification in Vue

vue-hooks-foodapp

A food app using a few hooks in Vue to show how they can work (experimental)

productive-twitter

Chrome extension: Minimal and friendly theme for productive twitter use

fortnite-vscode-theme

vue-directory-tree

A visualization of relevant files for vue repo, along with notes

page-transitions-simple

Vue/Nuxt Page Transitions- Simple Demonstration

sample-stripe-handler

Serverless function that uses the stripe api for a checkout process in a Vue application

vue-sublime-snippets

Simplify and supercharging my workflow with snippets for Vue.js that help me spin things up quickly

signals-demo

⚡️ A small demo site to explain some of the cool things Signals-based reactivity does in Angular

inbedby7pm

My other theme was for Night Owls like myself. This theme was requested for by the "In Bed by 7pm" crowd

is-this-a-sandwich

Is this a sandwich?

cda-locale

Showing Microsoft Cloud Developer Advocates speaking, 2017 and 2018

three-vue-pattern

A biofeedback visualization made with Three.js, Vue, and LUIS (cognitive services), made with Brian Holt

gsap-player

A small, customizable youtube-like player for gsap timelines

livecode-svganimation

In my Smashing Toronto talk, I'll be live coding an SVG animation from start to finish. Here's the repo that houses the base materials, and any further references for things we don't have time to cover.

recipe-box

netlify-functions-example

firefighter-demo

🚨 Demo to improve an existing firefighter app by making it queue tasks offline

smashing

This was the result of a live code talk at Smashing Conf in Toronto, this is how far I got in 45 minutes

example-azure-node

An example Node webapp deployed with GitHub actions

JAMstack-Workshop

Workshop materials for JAMstack workshop using Vue and Netlify.

docs-extensionpack

A collection of extensions for writing, editing, and reviewing documentation in VS Code

vue-wine-label

A very silly demo showing how to make a wine label making dashboard with Vue.js

contentful-nuxt-netlify

Example setup for Contentful and Nuxt on Netlify

favegame

Small starter example of Hasura, Nuxt, and Netlify for Jamstack/SSR rendering

headless-wp-nuxt2

sdras

d3-example-ignitetour

This repo serves as an example for Microsoft Ignite the Tour. In this session, we explore how to create basic charts and graphs using d3.

react-aframe-demo1

React A-Frame Demo 1

data-in-motion

My talk about the importance of animation in data visualizations

perfmatters-demo

demo for perfmatters conf https://perfmattersconf.com/

smashing-template

a base of the smashing talk

jamstack-template

devex-utm-builder

Benchmarking-Animations

Writing the same simple animation in a loop in SMIL, Canvas, CSS, and Velocity for benchmarking purposes.

easiest-netlify-lambda-example

gcp-ng-alt

Transform_intro

Introduction to Transforms, with the use of a transition in a class applied to all examples