Trouble configuring this and getting it working

[richard-edwards]

Hi there,

I've done everything I can to get this to work but I'm not getting anything showing and no errors at all. Do you know of a sample repo where this is being used so I can check my configuration?

Here is what I've done so far:

1. yarn add vue-nprogress

2. added import NprogressContainer from "vue-nprogress/src/NprogressContainer"; into my App.vue, referenced it in components and added the <nprogress-container></nprogress-container> into it.

<template>
  <div id="app">
    <nprogress-container></nprogress-container>
  </div>
</template>

<script>
import NprogressContainer from "vue-nprogress/src/NprogressContainer";

export default {
  name: "app",
  components: {
    NprogressContainer
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<style>
</style>

3. imported the library into my main.js and configured as below:

import Vue from "vue";
import NProgress from "vue-nprogress";
import App from "./App.vue";

Vue.use(NProgress);

const nprogress = new NProgress({ parent: ".nprogress-container" });

const app = new Vue({
  el: "#app",
  nprogress,
  components: { App },
  template: "<App />"
});

Anything look bad here? I'm sure it's just something small that I'm doing.

Removing the { parent: ".nprogress-container" } makes it work.
#10 gives more info about this.