II. Development Workflow

Now we are closer to a "real world" usage of the framework. This is what one usually uses for developing full fledged apps.

IIa. Tooling: aka. Development environment

In order to build an app we need an environment set up that will enable us to leverage the tooling available for the framework.

• Vue CLI

  Installing the CLI and going through some of the commands available to it.

• Vue UI

  Firing up the GUI that comes with the tooling and exploring it's features.

• VSCode setup

  Installing extensions that will aid in the development of Vue apps.

  • ESLint
  • Prettier

• Vue devtools

  Quick tour of the Chrome extension

• Single File Components explained

  TBD. Content available in Vue Guide (Official docs)

• Component Libraries

  We have a couple libraries at our disposal that enable us to kickstart our projects easily by leveraging their pre-built components to assemble them for our own applications

• Vuetify

III. Vue Frameworks

IIIa. NuxtJS

Explaining the solution, core concepts. // Roughly what I want to cover, but this is subject to change

• Concepts
  • Starting from Scratch
  • Using create-nuxt-app
  • Directory Structure
  • Configuration
  • Routing
  • Views
  • Async Data
  • Assets
  • Plugins
  • Modules
  • Vuex Store
  • Commands and Deployment
  • Development Tools

IIIb. VuePress

• Concepts
  • Installation
  • Directory Structure
  • Configuration
  • Asset Handling
  • Markdown Extensions
  • Using Vue in Markdown
  • Internationalization
  • Deploying
  • Advanced
    • Frontmatter
    • Permalinks
    • Markdown Slot
    • Global Computed

IIIc. Gridsome

// todo: determine if we want this

• Core Concepts * Pages * Collections * Templates * Layouts * Images * Linking
  • Basic Gridsome
    • Directory structure
    • Project Configuration
    • Pages

IV. Course Project(s)

We now want to piece together all the knowledge we have acquired so far and create something useful that presents a non-trivial amount of features.

• Building a component library

  Build a non trivial component (multi select?) and export it alongside other components that could be trivial or not

• Building a WebApp

• Building a Desktop App

• Build a PWA