CODEWITHSUNDEEP
css-transitionsvue.jsvue-router
Chris Schmitz
Chris Schmitz

Reputation: 20940

"Failed to resolve directive: transition" when trying to use a transition with vue-router

I've got a vue app in which I'm using the vue-router. 

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
let router = new VueRouter()

// Components
import App from './App.vue'

import Mapper from './components/Mapper/mapper.vue'
import ToDos from './components/Todos/ToDoApp.vue'
import Punchlist from './components/Punchlist/punchlist.vue'

// Transitions
Vue.transition('slide',{
    enterClass: 'slideInRight',
    leaveClass: 'slideOutRight'
})


// Redirects
router.redirect({
    '*': 'punchlist'
})

// Mappings
router.map({
    '/mapper': {
        component: Mapper
    },
    '/todos': {
        component: ToDos
    },
    '/punchlist': {
        component: Punchlist
    }
})

router.start(App, '#app')

I have a specific transition registered called slide that I would like to use when navigating between routes. In my App component I added the v-transition and transition-mode directives to the route-view:

<template>
    <div class="container">
    <h1>Component Gallery</h1>
      <p>
        <a class='btn btn-primary' v-link="{ path: '/punchlist' }">Punchlist</a>
        <a class='btn btn-primary' v-link="{ path: '/todos' }">Todos</a>
        <a class='btn btn-primary' v-link="{ path: '/mapper' }">Mapper</a>
      </p>
      <router-view v-transition="slide" transition-mode="out-in" :google-maps-api-key="googleMapsApiKey"></router-view>
  </div>
</template>

When I try to run it, I get the console error:

[Vue warn]: Failed to resolve directive: transition (found in component: ) console error

I've been reading through the docs and looking at examples but I can't figure out why it's erroring out when trying to resolve the binding.

Any ideas?

Upvotes: 2

Views: 4099

Answers (1)

Jeff
Jeff

Reputation: 25211

Transition is an attribute, not a directive. No v-:

<router-view transition="slide">

Upvotes: 1

Related Questions