Toast service not doing anything?

[Jogai]

Tested in a clean vue cli 3 created project that i setup with typescript. The toast never shows up. Is typescript somehow in the way?

package.json

{
  "name": "clientapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "primeflex": "^2.0.0-rc.1",
    "primeicons": "^4.0.0",
    "primevue": "^2.0.2",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.0.0",
    "vue-router": "^3.3.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.6.1",
    "@typescript-eslint/parser": "^3.6.1",
    "@vue/cli-plugin-babel": "~4.4.6",
    "@vue/cli-plugin-eslint": "~4.4.6",
    "@vue/cli-plugin-router": "~4.4.6",
    "@vue/cli-plugin-typescript": "~4.4.6",
    "@vue/cli-service": "~4.4.6",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^7.4.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^10.2.11",
    "node-sass": "^4.14.1",
    "prettier": "^2.0.5",
    "sass-loader": "^9.0.2",
    "typescript": "~3.9.6",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

main.ts

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

import Toast from "primevue/toast";

Vue.component("Toast", Toast);

import ToastService from "primevue/toastservice";

Vue.use(ToastService);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="scss">
@import "~primevue/resources/primevue.css";
@import "~primevue/resources/themes/nova-alt/theme.css";
@import "~primeicons/primeicons.css";
@import "~primeflex/primeflex.css";

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

About.vue

<template>
  <div class="p-grid">
    <Button label="Click" @click="fireToaster" />
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-property-decorator";
import Component from "vue-class-component";
import primeButton from "primevue/button";

@Component({
  components: {
    Button: Vue.extend(primeButton),
  },
})
export default class About extends Vue {
  mounted() {
    this.$toast.add({
      severity: "success",
      summary: "Successful",
      detail: "Toasted",
      group: "tl",
    });
  }

  private fireToaster() {
    this.$toast.add({
      severity: "success",
      summary: "Successful",
      detail: "Toasted",
      group: "tl",
    });
  }
}
</script>

[cagataycivici]

Do you have a component somewhere to display the messages?

[Jogai]

No, but if I add to app.vue, noting shows up

[Jogai]

Well, it shows up in the dev-tools, but still not if i fire a message...

[Jogai]

It does now, maybe the watcher wasnt running.