Simple example does not work in vuepress

[DaleMatthews]

Trying to use this component in vuepress and I am getting this error

vue.runtime.esm.js?2b0e:587 [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.

found in

---> <Anonymous>
       <Carousel> at C:\Users\Felix\Projects\Phoenix\vue-carousel\src\index.vue
         <AboutMe> at src/.vuepress/components/about-me.vue
           <V5103d6244901e> at src/about.md
             <Page> at node_modules/vuepress/lib/default-theme/Page.vue
               <Layout> at node_modules/vuepress/lib/default-theme/Layout.vue
                 <Root>

I installed the package using npm as instructed, then tried 1) registering the component globally in enhanceApp.js 2) or importing it directly into my about-me component and registering it there

I assume the issue has to do with how you're building to your dist dir. I see some potentially useful info here: https://github.com/vuejs-templates/webpack/issues/215

[fengyuanchen]

Import vue.esm.js instead of vue.runtime.esm.js.

[DaleMatthews]

I'm not importing vue at all.

// enhanceApp.js as defined by vuepress
import VueCarousel from '@chenfengyuan/vue-carousel';

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData // site metadata
}) => {
  Vue.component(VueCarousel.name, VueCarousel);
}

I haven't had these issues with other components

[fengyuanchen]

This component requires vue-template-compiler for compiling custom slide content as HTML.

[fengyuanchen]

You should install vue-template-compiler and import vue.esm.js in your vuepress config file.

[kjimenezdev]

I was encountering the same issue, but this doesn't happen whenever the production build is done so.. just you can ignore the warning. Thanks for the carousel component.

[taozuhong]

@fengyuanchen Could you post a minimal working example for adding this to Vuepress?

[taozuhong]

@kjimenezdev could you share the vuepress component?

[fengyuanchen]

@taozuhong Please note that:

• @chenfengyuan/vue-carousel@1.x for Vue 2 and Vuepress 1.
• @chenfengyuan/vue-carousel@2.x for Vue 3 and Vuepress 2.

[taozuhong]

收到，谢谢分享。 Got it, thanks.