bootstrap-vue toast not displaying on server

Question

on our website we are using a toast, at least we want to. The website uses bootstrap-vue to show the toast. That works on my development machine, once I push this to our server (S3 bucket), the toast does not pop up. When I inspect the website, I can see the toast is there, however on the website there is only empty space where the toast is supposed to be, no text is displayed.

This is how I call the toast:

created() {
const id = '1'

const vNodesMsg = this.$createElement(
  'p',
  { class: ['text-left', 'text-charcoal'] },
  [
    this.$createElement(
      'strong',
      'This is the message the user will see when he gets to this page'
    ),
    this.$createElement(
      'b-button',
      {
        on: { click: () => this.$bvToast.hide(id) }
      },
      'Close'
    )
  ]
)

this.$bvToast.toast([vNodesMsg], {
  id,
  noCloseButton: true,
  noAutoHide: true,
  toaster: 'b-toaster-bottom-full',
  isStatus: true,
  solid: false,
  appendToast: false,
  variant: 'secondary',
  visible: true
})
},

After inspecting the website on my machine, I see no difference in the code. Except the toast is displayed.

What can I do?

Any help is greatly appreciated.

To put more detail to this:

npm run dev

and then go to localhost:3000 works.

npm run build
serve -s dist

and go to localhost:5000 does not work.

Copying the dist folder to our server and call the website doesn't work either. That was no surprise.

Can it be something is missing in my config?

Thanks,

Michael

Answer 1

I somehow figured it out.
I've created a new project and the toast popped up. I compared every configuration file from the new project to the other one. Nothing worked until I changed the dev dependency for tailwind from

"@nuxtjs/tailwindcss": "^1.0.0"

to

"@nuxtjs/tailwindcss": "^3.4.2"