Skip to content

Vue router-view isn’t displaying all views

Sorry for the heavy text. All of my router-views work, except for one, which shows blank. I do not see any console errors of warnings and the format is identical between views – the only difference is the template. This was working, but I started a new project because my package.json and dependencies got messy. I’ve read through the code ad nauseum and I just can’t work out why it wont show. The code is condensed as there’s lots. If you prefer, here’s a link to a sandbox:

  <div class="review-movie-detail">
    <div class="movie-image">
    <img :src="(`${movie.poster_path}`)" alt="Movie Poster" />

    <table class="movie-rating-details">
    <tr> <h2>{{movie.original_title}}</h2> </tr>
    <p> </p>
    <tr>Gore rating: <span class="emojiRatings" >{{getGoreEmoji()}} </span></tr>
    <tr><input v-model = "goreRating" type="range" min="1" max="100" class="slider" id="myRange"></tr>

    <tr> <div class="star-rating"> <star-rating v-model="rating"> </star-rating></div></tr>
    <tr><b-button class="block-button">Submit review</b-button></tr>

import { ref, onBeforeMount } from 'vue';
import env from '@/env.js'
import { useRoute } from 'vue-router';
import StarRating from 'vue-star-rating'

    export default {
      components : {StarRating},
      setup () {
        const movie = ref({});
        const route = useRoute();
        onBeforeMount(() => {
            .then(response => response.json())
            .then(data => {
              movie.value = data;
        return {
      data() {
         return {
           goreRating: '50',
           shockRating : '50',
           jumpRating: '50',
           plotRating: '50',
           supernaturalRating: '50',
           rating: '3.5'
      methods: {
    getGoreEmoji() {
    let emojiRating = ["🩸", "🩸🩸", "🩸🩸🩸", "🩸🩸🩸🩸", "🩸🩸🩸🩸🩸", "🩸🩸🩸🩸🩸🩸"]
    return emojiRating[(Math.floor(this.goreRating/20))]


and here is my router:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import MovieDetail from '../views/MovieDetail.vue'
import ReviewMovie from '../views/ReviewMovie.vue'

const routes = [
    path: '/',
    name: 'Home',
    component: Home
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
    path: '/movie/:id/review',
    name: 'Review Movie',
    component: ReviewMovie

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),

export default router

and app.Vue to display the router view…

  <GoBack />

  <router-link to="/">
import GoBack from "@/./components/GoBack"
export default {
  components: {

How can I find the root cause of this issue (pun intended)?


As you are using Vue 3, you need to use [email protected]

npm install [email protected]
yarn add [email protected]

in package.json, it should be

"vue-star-rating": "^2.1.0"

and use the new new syntax as well

<star-rating v-model:rating="rating"></star-rating>

Here is the working codesandbox: