Generate a library using Vue CLI from a component and then import it into your project

When using vue-cli to build my lib, I run the following command:

"build": "vue-cli-service build --target lib --name myLib ./src/component.vue"

After the build, how can I import my component from the dist folder?

Importing from path-to-myLib/src/component.vue works perfectly fine! However, the following code doesn't seem to work:

// undefined
import { component } from 'path-to-myLib/dist/myLib.umd.js' 
// undefined
import myComponent'path-to-myLib/dist/myLib.umd.js' 
// result: https://i.sstatic.net/xHSzL.png
import * as myComponent'path-to-myLib/dist/myLib.umd.js'

I'm unable to figure out what the issue might be.

Answer №1

Make sure to include the 'main' property in your package.json as shown below: "main":"path-to-myLibrary/dist/myLibrary.umd.js", This should point to the generated umd file. Then, you can import {component} from 'library' and use it within your library by referencing the library name.

Answer №2

To utilize your custom-built component in any location, simply incorporate it using the following import statement:

import MyComponent from 'path/to/MyComponent.umd.js'

The oversight of this particular syntax in your previous endeavors suggests that it may have been a simple error in the import statement.

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

Employing a dual IDE approach for a single project

Currently, I am developing an ASP.NET WebAPI with VUE.js Frontend (including a desktop Client). I enjoy using VSCode for Frontend work as it is optimized for Vue.js and tailored to my personal preferences. Similarly, I find that .NET and C# are well-suited ...

Secure Flask API used for serving JSON files to a basic HTML, JavaScript, and CSS web application

I have developed a basic web application that will display data in a table and be updated on a weekly basis. To perform this update, I utilize Python code in the backend to scrape and modify data before storing it in a SQLite database. After some researc ...

Vue computed properties do not seem to update the select list as expected

I designed a Vue component to generate a select list with various options and save the selected value in a Vuex store using the save method. The available choices are dynamically generated by a computed property within the component, which retrieves data f ...

Configuring Google Chart LineChart settings by utilizing the series attribute

I am looking to modify the options for my line chart. However, when I define the options as shown below, the first series setting gets ignored and only the second series property is applied. var options = { title: 'Temperature Graph ( sampling ev ...

Performing simultaneous document queries within a single API in MongoDB

I am currently working with an API written in typescript and attempting to execute parallel queries for the same document by using Promise.allSettled. However, I have noticed that it is performing poorly and seems to be running sequentially instead of in p ...

Is it possible to create a pie chart using Chart.js with data fetched through an Ajax HTTP GET

Embarking on a new journey here, this week's focus is on delving into Chartjs for canvas and brushing up on JSON usage. The task at hand includes employing an Ajax HTTP GET request to fetch the json file. However, I am currently stumped on how to trig ...

converting code from JavaScript to Flask and then back to JavaScript, all within a single-page application

In order to make my single-page web app fully functional, I have completed the following tasks: Sent a json from .js to Flask (COMPLETED) Ran the input through a Python function called getString() and obtained a string output (COMPLET ...

NextJS: encountered an error with fallback enabled

I have my NextJS setup on Vercel and here is how I configured getStaticPaths: const paths = posts.map((post) => ({ params: { player: post.player, id: post.id }, })) return { paths, fallback: true } However, when I set the fallback to true, I ...

"Cross-origin resource sharing problem while working with NodeJs, Express, and React on

Currently, I am working on a small project where I am using NodeJs and Express for the backend and React for the client side. In order to tackle CORS policy issues, I have implemented the "cors" npm package on the server side, but unfortunately, it doesn& ...

The preventDefault() function is not functioning properly on the <a> tag

As a JavaScript beginner, I decided to create an accordion menu using JavaScript. Although I was successful in implementing it, I encountered a bug in my program. In this scenario, uppercase letters represent first-level menus while lowercase letters repr ...

How can I implement a jQuery modal dialog that loads a form page with pre-existing jQuery code for Autocomplete functionality?

I am facing an issue where I have a dynamically generated form on a web page and I want to display it using the jQuery UI modal dialog. Previously, I was suggested a solution that worked when my form did not already contain jQuery UI components like Autoc ...

What is causing the lack of response in the select box on Mac Chrome when I try to click on it?

Similar Question: JQuery function doesn't work on Chrome on Mac, but works on Chrome on Win 7 and all other browsers I am encountering an issue with a select-option list <div class="social-option"> <select name="hex_theme_options[soc ...

The map fails to load on the HTML page

I am struggling to load a map into my HTML page from a file located in the app folder. Despite using the correct code for inserting the map, it still does not load properly. <!-- Contact section start --> <div id="contact" class="contact"> ...

Link the Material-ui ToggleButtonGroup with redux-form

I'm currently facing a challenge with connecting the material-ui ToggleButtonGroup to Redux form. The issue seems to be occurring in my code snippet below: <Field name='operator' component={FormToggleButtonGroup} > <ToggleButt ...

What is the significance of utilizing response.json() for accessing JSON objects on both the server and client sides?

Just starting out with the MEAN stack, I've included my API code below where I'm using res.json(random) to send a random password. module.exports.changePass = function (req, res) { console.log(req.body.email) db.user.find({ where: { name: ...

Vue.js: The `ref` attribute is missing in the child component

I've encountered an issue with my custom component, named Input. While all attributes passed to this component are inherited successfully, the ref attribute seems to be consistently omitted. The ref attribute is crucial for setting focus on the eleme ...

Are you unsure whether to use Ajax or jQuery? If you need assistance in adding parameters to

Currently delving into ajax/jQuery and encountering some hiccups. Here's the code snippet: .click(function() { var period = 'ALL'; if ($('#registerat input:checked').val() != 'ALL') period = ...

How can I loop through ajax data and assign it to the @foreach loop within the same view in a Laravel application?

I need to implement filtering functionality in a table view, where the data displayed can be updated based on user-selected options. The goal is to refresh only the table part when a search option is chosen from the filters, displaying the new filtered d ...

Accessing a specific element within an array that has been nested within another array, using JavaScript

Here's what my code looks like: planets[0]= new THREE.Mesh( geometry, material ); planettexts[0]= new THREE.Mesh( textGeometry, textMaterial ); planets[0].add(planettexts[0]); Now, I am trying to hide the planettext, but every attempt results in an ...

Working with PHP to transfer toggle switch information to JSON

I'm currently experimenting with a combination of HTML, JavaScript, and PHP on a single page. My goal is to update a JSON file with either 0 or 1 based on the toggle switch state change. I seem to be close to achieving this functionality, but upon rel ...