A Vue component library devoid of bundled dependencies or the need for compiling SCSS files

My current challenge involves the task of finding a way to publish our team's component library. These components are intended to be used by various internal applications within our organization. I have specific requirements:

  • The library must be accessible as an npm package from an internal local repository (this part has been resolved).
  • Components need to be compiled into JavaScript with typescript interface (*.d.ts) references included in the package.
  • Avoid bundling third-party packages (including Vue). Instead, it is preferred that the necessary dependencies be added to a project when the component is introduced and after running "npm i".
  • The compiled css bundle should be part of the package but referenced separately within a project as needed.
  • The raw scss files used for styling components should also be included in the package so they can be integrated into a project's existing scss during the build process.

I have explored using 

vue-cli-service build --target lib
to achieve these goals, but it appears to bundle everything together.

Is what I'm aiming for feasible? Could it potentially be considered an anti-pattern? Are there any alternative solutions available? I am unsure of where to start.

javascripttypescriptvue.jsnpmvue-component

Answer №1

You're on the right track with using 

vue-cli-service build --target lib
. This command bundles your main .vue file as a component, serving as the entry point for your package.json. The bundled file does not include the Vue library itself (as indicated in the documentation), and it typically extracts CSS into a separate file within the dist folder. I hope this information proves helpful to you.

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

Executing a function in AngularJS using PHP

My current project involves an Angular application that needs to load a PHP page within the view. The setup is functioning properly, but I now require an Angular function to run after the PHP code has loaded. I am wondering about the process of calling an ...

javascriptphpangularjs

Employing multer in conjunction with superagent to enable file uploads from a React application

I am new to using multer and experiencing some difficulties with it. My goal is to upload an image file from a react client using the superagent library to my server. However, the req.file data always shows as undefined in my code: On the server side : ...

javascriptfileexpressmultersuperagent

Livereload in Gulp fails to automatically restart the server

How can I make my gulp+livereload server automatically restart and update the page when JS files are changed? Below is a snippet from my gulpfile.js: var gulp = require('gulp'), livereload = require('gulp-livereload'), ...

javascriptexpressgulplivereload

Passing values from a Laravel controller to a Vue component as a prop

At the moment, I have a Laravel route that directs to the index function of my controller with an ID passed, where I then return the ID in a view. public function index($id) { return view('progress') ->with('identifier', ...

javascriptlaravelvue.jsvuejs2vue-component

Error: The method By.cssSelector is invalid and cannot be used

Currently utilizing npm's Selenium Webdriver. Having difficulty getting By.cssSelector to function properly. Other selectors like By.tagName and By.id are working fine. Here is the code snippet: var webdriver = require('selenium-webdriver&apos ...

javascriptnode.jsselenium

What is the process for requiring web workers in npm using require()?

I have a setup using npm and webpack, and a part of my application requires Web Workers. The traditional way to create web workers is by using the syntax: var worker = new Worker('path/to/external/js/file.js'); In my npm environment, this metho ...

javascriptnode.jsnpmwebpackweb-worker

Which NPM packages are necessary for implementing modular Vue components?

While I have experience with traditional multi-page applications created using HTML + JS libraries and server-side rendering (SSR), I am relatively new to modern web development. Currently, I am learning Vue JS (the latest version) through online tutorials ...

javascriptnode.jswebvue.jsnpm

Adjust the hue of the X axis labels to display a variety of colors within Chart.js

Utilizing Chart.js for my bar chart. The X axis labels contain 4 lines, and I want to change the color of each line individually rather than having all values in one color. var barChartData = { labels: [["Injection", 10, 20], // Change the color here ...

javascriptjquerychart.js

Retrieve the dynamically generated element ID produced by a for loop and refresh the corresponding div

I am facing a challenge with my HTML page where I generate div IDs using a for loop. I want to be able to reload a specific div based on its generated ID without having to refresh the entire page. Here is a snippet of my HTML code: {% for list in metrics ...

javascriptjqueryhtmlajax

"Implementation of clearInterval function may not always result in clearing the interval

The scrolling process within the div element flows smoothly in both directions, however, it seems to encounter an issue when executing the scrollBack() function. Despite including a clearInterval() statement at the intended point, the interval does not a ...

javascriptjquery

Reduce the number of unnecessary HTTP requests for duplicate images in VueJS applications

Scenario: On a webpage, multiple components are provided with a list of users. Following this provision, a foreach loop is utilized to call an additional component for fetching the user's image. It is plausible that various components may contain the ...

imagevue.jsaxiosvue-componentvuex

The alert() function in PHP does not function as expected and instead prints to the console

My attempt to display an alert is not working and I'm not sure what I might be missing. Can someone please help me pinpoint the issue? //my.php if(mail($to, $subject, $message, $headers)) { $message = "Mail sent."; echo "<script type=&apo ...

javascriptphp

Eslint error occurs when applying a class to paragraph tags

Currently, I am in the process of incorporating Vue into a project. The webpack compiler comes equipped with eslint and vues eslint. However, when attempting to compile the code, an error message cannot read property 'replace' of undefined keeps ...

vue.jsvuejs2vue-componenteslint

What is the process for assigning a background color to a specific option?

Trying to create a dropdown menu with various options and colors. Managed to set background colors for each option, but once an option is selected, the background color disappears. Is there a way to fix this issue? See my HTML example below: <select> ...

javascripthtmlcss

Remove repeated selections in a dropdown menu using Vue JS

Could someone offer me some assistance, please? I have 3 dropdown menus that need to display specific subjects based on previous selections. One issue I'm facing is how to remove the initial selection in menu one from both menu two and menu three? I ...

vue.js

Guide to center-aligning ElementUI transfer components

Has anyone successfully incorporated ElementUI's transfer feature inside a card element and centered it? https://jsfiddle.net/ca1wmjLx/ Any suggestions on how to achieve this? HTML <script src="//unpkg.com/vue/dist/vue.js"></ ...

javascriptcssvue.jselement-ui

Tips for changing array items into an object using JavaScript

I am working with a list of arrays. let arr = ["one","two"] This is the code I am currently using: arr.map(item=>{ item }) I am trying to transform the array into an array of sub-arrays [ { "one": [{ ...

javascriptarraysreactjsobjectfunctional-programming

What is the reason for not being able to call abstract protected methods from child classes?

Here is a simplified version of my project requirements: abstract class Parent { protected abstract method(): any; } class Child extends Parent { protected method(): any {} protected other() { let a: Parent = new Child() a.me ...

typescript

Can someone please explain the distinction between $http.get() and axios.get() when used in vue.js?

I'm feeling a little bit puzzled trying to differentiate between $http.get() and axios.get(). I've searched through various sources but haven't found any answers that fully satisfy me. Can someone please offer some assistance? ...

javascripthttpvue.jsaxios

Retrieve an identifier from a web address and transmit it to the Laravel controller using VueJS

I'm currently facing an issue with submitting a form in my Vue application. The route I am working with is: http://cricketstats.test/en/dashboard/players/z2d4ca09a7/india/941/runs In this URL, the number 941 represents the player's ID. I need to ...

phplaravelvue.jsvue-router