Skip to content

Instantly share code, notes, and snippets.

View lsapan's full-sized avatar

Leah Sapan lsapan

View GitHub Profile
@lsapan
lsapan / vue-tests-mocha-webpack-with-coverage.md
Created December 27, 2019 21:53
Setting up Vue tests (with coverage) for mocha and Webpack

Setting up Vue tests (with coverage) for mocha and Webpack

There are seemingly a few incompatibilities with Vue and Istanbul/nyc at the moment, making it a bit difficult to set up proper coverage reporting for Vue files. Thankfully, there's a relatively easy way to fix that!

This will walk you through everything you need to do to add tests and coverage reporting to your vue-cli based project.

  1. Install dependencies for testing and coverage reporting

    yarn add -D @vue/cli-plugin-unit-mocha @vue/test-utils istanbul-instrumenter-loader nyc
    
@lsapan
lsapan / vue-cli-django.md
Last active December 29, 2022 10:47
Using Vue CLI to start a Vue frontend for use with a Django backend

Using Vue CLI to start a Vue frontend for use with a Django backend

Note: This guide has been updated for use with @vue/cli version 4! Please make sure you're using the latest version of @vue/cli.

When it comes to starting new Vue projects, you can't really beat Vue CLI. The Vue team has done a phenomenal job of making an easy-to-use tool for getting started with reasonable defaults. If you're using Django though, you may not have the easiest time getting its static system and webpack to play well together.

A good chunk of this is applicable to any webpack-compiled frontend and Django, but we'll focus specifically on the steps involved with Vue CLI.

As a quick heads up: this tutorial assumes you're creating your Vue project in a folder named frontend inside of your Django project folder. If you want it named something else, or want it in a different folder, just update the paths accordingly.