Nuxt page transitions work locally, but not on firebase hosting

Question

Im using nuxt page transition 2 different ways and they both work on localhost, but not on firebase hosting.

I am using both the built in page transitons globally. And also i tried defining the transitions on each page. Both ways work on localhost but no animation is fired when it is hosted.

First way - using global transitions

// Layout transitions
.layout-enter-active, .layout-leave-active {
  transition: opacity 0.5s;
}
.layout-enter, .layout-leave-active {
  opacity: 0;
}

// Page transitions
.page-enter-active, .page-leave-active {
  transition: opacity 0.5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

Second way, using page defined transitons.

  export default {
  transition: 'fade',
  components: {}
...
}

No error messages. In google Dev tools, the animation is not even fired.

Answer 1

I solved the problem. I had the CSS for the transitions in a global CSS file using this in nuxt.config

  css: ['~/assets/global.scss'],

I needed to put the CSS for the transitions inside of a .vue component for it to work.