CODEWITHSUNDEEP
javascriptvue.jsvue-component
rpivovar
rpivovar

Reputation: 3438

Vue component rendered out as comment?

I'm trying to include a Vue npm package called Vue Carousel as a component in my project.

This specific example of how to use the component employs a template string for its template, so I've tried to include this component in the same way.

carousel.vue:

<script>
    import { Carousel, Slide } from 'vue-carousel'

    const buildSlideMarkup = (count) => {
        let slideMarkup = '';
        for (var i = 1; i <= count; i++) {
            slideMarkup += '<slide><span class="label">' + i + '</span></slide>'
        }
    return slideMarkup;
    };

    export default {
        name: 'testcarousel',
        template: '<div><carousel :navigationEnabled="true">' + buildSlideMarkup(10) + '</carousel></div>',
        Carousel,
        Slide
    }
</script>

I then try to include this component in my main component, app.vue:

<style scoped src="./app.css"></style>
<template src="./app.html"></template>

<script>
  import testcarousel from '../carousel/carousel'

  export default {
    name: 'app',
    components: { testcarousel }
  }
</script>

I assumed the component would be ready to use within app.html at this point:

<div id="app">
    <testcarousel />
</div>

Unfortunately, I don't see the carousel displayed in the browser, and the component appears to be commented out in the DOM, appearing like this:

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

I also get this error in the console:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

After doing some research, it seems that I will need to have the runtimeCompiler option set to true, but after adding a vue.config.js with this setting:

module.exports = {
    runtimeCompiler: true,
}

..I'm not seeing any changes. I don't have Webpack installed in this project. Do I need to do that to make this work? Bonus dumb question: will it affect my project if I install Webpack after the initial project creation?

Upvotes: 0

Views: 2470

Answers (1)

Krzysztof Kaczyński
Krzysztof Kaczyński

Reputation: 5071

I think that you forgot about Vue.use(VueCarousel). Add Vue.use(VueCarousel) before:

    export default {
        name: 'testcarousel',
        template: '<div><carousel :navigationEnabled="true">' + buildSlideMarkup(10) + '</carousel></div>',
        Carousel,
        Slide
    }

If this won't work try to recreate your project with vue-cli and choose WEBPACK option it should work.

Upvotes: 1

Related Questions