/todo-list

Simple todo list in Vue.js

Primary LanguageVue

👋 Hi, I'm Martin 🧔🏻

@martin on slack

I'm a designer-developer dedicated to creating beautiful, functional, inclusive, and accessible web experiences. My expertise is in front end development, design thinking, product prototyping, and technical strategy; I run a practice called Low Tide Consulting.

What did we build?

A big old todo list, which saves todos to the browser’s localStorage; allowing a user to edit and complete their todos.

Links

What did we talk about?

  • Project creation using vue-cli

    • @vue/cli
    • vue ui

  • Create project

  • Quick demo of vue ui

    • Plugins/Dependencies
    • Configuration
    • Tasks
      • Build and show webpack analysis

  • Code formatting: who cares?

    • Add .prettierrc.js
    module.exports = {singleQuote: true,semi: false};

  • Application structure

    • public/ndex.html entrypoint
    • JavaScript app instantiates in src/main.js

  • Single file components

    • App.vue & HelloWorld

  • Props, Rendering using {{}}

  • Reactivity in Vue

  • Directives, v-for, v-on, v-bind, v-model

  • Create ToDoContainer component

  • Scoped styles

  • Methods

  • Add localStorage for data persistence

    • saveTodo(todo) method
    • fetchTodos() method

  • Deploy to GitHub Pages

Running the app in development

Installs dependencies

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Deploy to GitHub Pages

sh deploy.sh

Lints and fixes files

npm run lint

Running the Vue UI (optional)

vue ui

Additional resources