Add props and transition when component is a fragment view

Question

I'm trying to make an app with vue.js and the extension vue-router, so in my main HTML page I have:

<router-view v-transition="test" transition-mode="out-in"></router-view>

But then I got the error

Attribute v-transition is ignored on component router-view because the component is a fragment instance.

For the component i use vueify and it look like that:

<template>
    <nav>
        <div class="blabla">
            blabla
        </div>
    </nav>
    <div>
        second div
    </div>
</template>

<script>
    module.exports = {
        data: function() {
            return {}
        }
    }
</script>

Do you know how I could add transition and props to my component with vue-router ?

Answer 1

I didn't know that components need to be one unique div. So I wrapped it in a unique div and it's working.

<template>
    <div> <!-- this is important -->
        <nav>
            <div class="blabla">
                blabla
            </div>
        </nav>
        <div>
            second div
        </div>
    </div>
</template>

And v-transition change for transition in vue 1.0.