Developing a way to make vue-custom-element compatible for embedding in external websites

I've been exploring ways to use a component from my Vue website on another site by embedding it in HTML. I came across 

https://github.com/karol-f/vue-custom-element
and found this helpful guide.

After installing the npm packages vue-custom-element and document-register-element, I attempted the following in my main.js file:

import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import 'document-register-element/build/document-register-element';
import reusableComponent from './components/reusableComponent.vue';

Vue.use(vueCustomElement);
Vue.customElement('reusable-component', reusableComponent);

Subsequently, I tried to incorporate the component into another website using the following code snippet.

<reusable-component></reusable-component>
<link href="/dist/static/css/app.36dd3e0b96e06ae6f3130a58cf185192.css" rel="stylesheet">
<script type="text/javascript" src="/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js">. 
</script>
<script type="text/javascript" src="/dist/static/js/vendor.614f0593bd5c53cf6320.js">. 
</script>
<script type="text/javascript" src="/dist/static/js/app.1c44a427c10b2e559de0.js"></script>

However, before I could implement the reusable component on another website, my main site encountered a crash due to this error.

Are there others who have come across this issue before? Thank you for your help!

javascriptvue.jswebpack

Answer №1

In my opinion, the usage of vue-custom-element may not be correct. If you intend to incorporate the entire project as a widget for another project, then it might work.

Vue.customElement('reusable-component', reusableComponent);

Therefore, this library is designed to import App.vue, not just specific components from the project.

Vue.customElement('reusable-component', App);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Make your slides smooth and responsive with the unslick option in slick

Currently implementing the Slick Slider on a WordPress website. The slider is designed to display 3 columns at a screen size of 1024px and above. When the screen size drops below 1024px, the slider adjusts to show 2 columns, and on mobile devices, it swit ...

javascriptjquerycssflexboxslick.js

jQuery failing to append code after being removed

I need some assistance with an issue I've run into while using jQuery's .remove(). Here is a snippet of code that showcases the problem: $( '.video-button span.glyphicon-play' ).click(function() { $( '#video-player' ).ap ...

javascriptjqueryhtmltwitter-bootstrapdom

Setting MUI input value within a loop using an array value in React JS: A step-by-step guide

Recently, I created a React js demo using React MUI. To handle inputs, I created a separate component called InputText.js for each input field. The issue I encountered is when I tried to use this component to display multiple education fields stored in an ...

javascriptreactjsmaterial-uireact-hook-formsetvalue

Reactive map not triggering Vue computed() function

Having a reactive relationship with an initially empty map: const map = reactive({});, I also have a computed property that checks if the map contains a key named "key": const mapContainsKeyComputed = computed(() => map.hasOwnProperty("key")). However, ...

vue.jsvuejs3vue-composition-api

Problem encountered when bundling Swagger UI Express plugin with webpack for production deployment

Having an issue with the integration of the swagger-ui-express plugin in my node express REST API. When trying to bundle with webpack in production mode, I keep getting an error stating that SwaggerUIBundle is not defined. My app works fine without using w ...

node.jsexpresswebpackswagger

The action of POSTing to the api/signup endpoint is

Currently delving into the MEAN stack, I have successfully created a signup api. However, when testing it using POSTMAN, I encountered an unexpected error stating that it cannot POST to api/signup. Here is a snapshot of the error: Error Screenshot This ...

javascriptnode.jsexpress

Tips for dividing by a large number

I am currently attempting the following: const numerator = 268435456; const denominator = 2 ** 64; const decimalFraction = numerator / denominator; In order to achieve this, I have experimented with utilizing the code provided in this link: : const rawVal ...

javascriptreactjstypescriptcreate-react-appbigint

Adjust the field of view of the camera in ThreeJS

I'm currently working on adjusting the field of vision for a camera without having to create a new one. So far, I've successfully achieved this for the position using the following code: camera.position.set() Now, I'd like to implement a s ...

javascriptthree.js

Ways to retrieve HTML tags from a website's DOM and shadowDOM

I am currently working on a project using NodeJS where I need to extract the HTML structure of multiple websites. However, I am facing some challenges with this task. My goal is to retrieve only the HTML structure of the document without any content. It is ...

javascripthtmldomshadow-domtreewalker

What is it about the setTimeout function that allows it to not block other

Why is setTimeout considered non-blocking even though it is synchronous? And on which thread does it run if not the main thread? ...

javascriptnode.jsasync-awaitsettimeoutevent-loop

Utilize Angular's ng-repeat directive to iterate through this JSON data structure for implementing user-to

Struggling with the user-to-user messaging interface on an app and having difficulty using ng-repeat on the items. Here is the provided data: { "ID": 4118, "CreatedDate": "2015-08-20T03:12:50.397", "recipient": [ { ...

javascriptarraysjsonangularjsangularjs-ng-repeat

``req.body is not being properly populated when data is sent using form-data, causing

When I send data in my Node.js application as raw JSON/x-www-form-urlencoded from Postman, it gets passed successfully. However, when sending the data as form-data from either Postman or my Angular frontend, the req.body is coming back as undefined. I have ...

javascriptnode.jsangularmongodbexpress

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

I'm stuck trying to find a straightforward solution to this problem. The array of objects I have contains two values: team.seed: number, team.placement: string In the team.placement, there are simple strings like 7 to indicate 7th place or something ...

javascripthtmlangular

Removing all HTML elements within the div container

My HTML code includes the following: <div class="row" id="conditional-one"> <div class="large-12 columns"> <h3><?php echo $arrayStage_rule_one_title?></h3> <p> <?php echo $arrayS ...

javascripthtml

Choose from the options provided to display the table on the screen

One of the challenges I am facing involves a table with two columns and a select option dropdown box. Each row in the table is associated with a color - green indicates good, red indicates bad, and so on. My goal is to have all values displayed when the pa ...

javascripthtmlcss

Error in child component's class name with babel-plugin-react-css-modules

I'm currently implementing babel-plugin-react-css-modules in an existing React project. Most of the components are working as expected, but I've encountered an issue with passing styles to child components. My parent components look like this: ...

reactjswebpackbabel-plugin-react-css-modules

Using Vue component with v-model and custom input handler

I'm currently working on creating a wrapper component for an <input/> element in Vue.js. Here is the component code: <template> <div> <input v-bind="$attrs" :value="value" @input="input" /> ... </div> <te ...

javascriptvue.jseventemitter

Retrieve components of Node.js Express response using axios before terminating with end()

Is there a way to receive parts of a response from my nodejs server before res.end() using axios? Example: Server router.get('/bulkRes', (req,res)=>{ res.write("First"); setTimeout(()=>{ res.end("Done"); },5000); }) Cl ...

javascriptnode.jsexpress

Rails post with comments

Currently, I am in the process of developing a Rails application with Vue components integrated into multiple pages. To pass data to my Vue component, I use the following method: <v-my-component :posts="<%= @post.to_json %>"></v-my-componen ...

ruby-on-railsjsonvue.js

unable to implement multiple layouts while utilizing react-router

My current project requires two different layouts: one for the homepage (currently implemented in app.js) and another for the result page. After submitting a form, the results should be displayed in the result layout instead of the app layout. However, whe ...

javascriptreactjsreact-router