Search code examples
vue.jstemplatesrendervite

Using VITE + Vue3 - [Vue warn]: Component is missing template or render function


I'm trying to use VueThreeSixty ( https://github.com/rajeevgade/vue-360 ) component in my Vue3 + Vite project.

I imported everything, added VueThreeSixty to my components object, but it looks like I'm still missing something, can u help me figure out what?

[Vue warn]: Component is missing template or render function.  

Here's my code.

    <template>
    <Navigation></Navigation>
    <div class="tb_header">

    </div>
    <div class="container">
        <div class="row">
            <div class="w-2/5">
                <VueThreeSixty
                    :amount="36"
                    imagePath="https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36"
                    fileName="chair_{index}.jpg?v1"
                />
            </div>
            <div class="w-3/5">Sound</div>
        </div>
    </div> <template>

     <script>
     import Navigation from "../components/Navigation.vue";
     import Footer from "../components/Footer.vue";
     import VueThreeSixty from 'vue-360'

     import "vue-360/dist/css/style.css";

     export default {
     data() {},
     components: {
        Navigation,
        Footer,
        VueThreeSixty
    },
    };
    </script>

main.js

    import { createApp } from 'vue'
    import Home from './views/Home.vue'
    import Navigation from './components/Navigation.vue'
    import Footer from './components/Footer.vue'
    import App from './App.vue'
    import VueThreeSixty from 'vue-360'

    import 'vue-360/dist/css/style.css'

    import './main.css'
    import './typo.css'
    
    createApp(App)
    .use(VueThreeSixty)
    .mount('#app')

Solution

  • You should follow the documentation of https://github.com/rajeevgade/vue-360. You need to 'Vue.use' the component first and include tag vue-three-sixty. But it looks like this component does not support Vue 3 yet.