CSS is not working with vue js on dynamic routing

Question

I created route in vue

{
  path: '/coursedetailed/:id',
  component: MyCourseDetailed,
  props: true
},

It works, but after I go to the page, it seems that css is disabled. All request are completed component if filled with data. There is one error in console. The other pages works well

Uncaught SyntaxError: Unexpected token <

My vue script for component:

<script>
import axios from 'axios'
import MenuWhite from '@/components/MenuWhite.vue'

export default {
  name: 'coursedetailed',
  props: ['id'],
  components: {
    MenuWhite
  },
  data: () => {
    return {
      course: [],
      errors: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      axios({
        method: 'get',
        url: this.$store.state.endpoints.baseUrl + '/api/courses/' + this.$route.params.id + '/',
        withCredentials: true,
        headers: {
           Authorization: `JWT ${this.$store.state.jwt}`,
          'Content-Type': 'application/json'
        }
      }).then((response) => {
        this.course = response.data
      })
    },
  isToken () {
    if (this.$store.state.jwt) {
      this.$router.push({ path: '/profile' })
    } else {
      this.$router.push({ path: '/' })
    }
  }
 }
}

Any ideas where the problem may be?

Could be an unsupported CSS feature, are you using filter()? — Len Joseph, Mar 20 '19 at 20:13

score 2 · Accepted Answer · answered Mar 20 '19 at 20:21

Please check this link.

As it says, a basic Vue component may have a template, a script and a style tag.

Inside the style tag you may put your css directly or import your css file using the @import as you can see here by @Geraldine Golong's answer.

So, my suggestion is to put your css code inside your component (if so, recommend you to put inside your parent component), or import your css file using the proper Vue tag.

Hope it helps.

CSS is not working with vue js on dynamic routing

1 Answers1