Add stenciljs component fron NPM to Vue.js application

Asked Nov 13 '19 at 10:37

Active Nov 13 '19 at 10:37

Viewed 595 times

I don't get my tag to work in my Vue project. I have create a Stencil.js component test, its just the origional code from stencil when you create an web component. I have upload it to NPM as a public package.

So now it should just be to install and import the package in my vue app, but I cant make it work. (Vue app just build with Vue CLI and have typescript)

When I do the npm install stencil-component-test --save I can see the code in my node_modules, so that works.

I try to import and use it in my Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <my-component></my-component>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import MyComponent from "stencil-component-test";

export default {
  name: "home",
  components: {
    HelloWorld,
    MyComponent
  }
};
</script>

Its just an empty tag if I look in chrome dev-tools. What am I doing wrong?

asked Nov 13 '19 at 10:37

Johan Byrén

Is it possible to see the contents of the stencil-component-test package? – MJ_Wales Nov 13 '19 at 11:04
Yes, you can look at it and try it here https://www.npmjs.com/package/stencil-component-test – Johan Byrén Nov 13 '19 at 12:44
1

have you put in the head of your index.html file? – MJ_Wales Nov 13 '19 at 13:25
@MJ_Wales I can see now that I get an 404 when I include the script-tag. It can't find the package. I don't know why tho... – Johan Byrén Nov 13 '19 at 13:52
Does mycomponent.js file exist in the dist folder in the my-component folder in node_modules? – MJ_Wales Nov 13 '19 at 13:59
I got it to work, I had the wrong name. It should be – Johan Byrén Nov 13 '19 at 14:06
1

Great! No worries. – MJ_Wales Nov 13 '19 at 14:16

Add stenciljs component fron NPM to Vue.js application

0 Answers0