sdras/intro-to-vue

Workshop Materials for my Introduction to Vue.js Workshop

Introduction to Vue.js 3 Course Materials

Author: Sarah Drasner

FYI The previous version Vue 2 course is available here.

This repo houses the materials and resources for the Introduction to Vue.js course on Frontend Masters.

Most of the materials for the course are outlined below, but there are also directories housed here of very basic examples of some of the techniques we will cover so that students don't have to spend a lot of time researching in order to get started. It is recommended that students use CodePen to create work for the duration of the course, as we'll use preprocessors like SCSS as well as Babel for ES6, and resources like Vue.js, both prod and dev versions, codepen makes it easy to do so without time devoted to setup. If you like, you can also scroll to the CodePen collection section and fork one of the existing pens in those collections, they are comprehensive. There are more true-to-life build process examples, in the VueCLI, Nuxt, and Vuex Resource Sections. It's encouraged to watch the lecture to learn how to set up the builds yourself, though.

• Here are the Vue chrome devtools
• Here are the Vue 3 beta chrome devtools
• Here is the codepen debugger chrome extension
• Here is Vetur for VS Code
• Here are the snippets I'll be using vue vscode snippets
• Here is my Vue Extension Pack for VS Code
• Here is the hub tool I use to work with GitHub from the command line

Materials for Vue 3 Course

Slides:

All slides have password !vue!

• Intro to Vue Intro
• Intro to Vue 1: Directives & Data Rendering
• Intro to Vue 2: Methods, Computed, Watchers
• Intro to Vue 3: Components and Slots
• Intro to Vue 4: Vue CLI and Nuxt
• Intro to Vue 5: Animation
• Intro to Vue 6: Composition API and Custom Directives
• Intro to Vue 7: Vuex

This course has been updated in 2020 for the Vue3 release, older materials for Vue 2 course available in the vue2-resources directory.

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

intro-to-vue's Issues

installation error for nuxt sample

When running the npm run dev to setup the nuxt 'setup2' project, i receive this error:

This dependency was not found:
* ~components/Child.vue in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/Users/frazer.wilson/intro-to-vue/setup2/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue

To install it, you can run: npm install --save ~components/Child.vue

If i run the command it suggests

npm ERR! [email protected]: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.

Slides typo

In this slide:

<label for="no"> yes</label>

seems like is for="yes".

Add to awesome

Hey, I highly recommend adding this repo to awesome-vue. A lot of people monitor changes over there and this is great resource to get familiar with vuejs.

Slides require password

Please provide the password to view slides

Typo on Intro to Vue 1

Thanks for your great works on the slide introduction into VueJS.
It really helped me learning Vue.

There is a typo inside intro to vue-1/slide number 35.

It should be stopPropagation not stopPropogation (CMIIW)

Nuxt Type Repository not Found

Hi @sdras , the repository link to Nuxt-type is missing, where i can find it? is it deleted or renamed?

404 when trying to access the code pen for challenge 6

Just letting you know I'm getting a 404 when trying to access the link to codepen for challenge 6 from the top of the slides.

Missing :key

Getting errors for not having unique keys attached to products.