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

Combining two forms into one PHP page, but intending to submit only a single form

I'm facing an issue on my page where I have both a sign-in and a sign-up form. Whenever I click on either the sign-in or sign-up button, it always ends up submitting the sign-up form. What am I doing wrong? Here's the PHP code snippet: if($_SE ...

javascriptphphtmlajaxforms

Identifying the scenario where Partial<T> inherits from T

I am facing a scenario where I am working towards achieving a specific "state": type State = { foo: number, bar: number, baz?: string }; Initially, I may not have reached the complete State yet but rather align with the structure of Partial<State>. ...

typescripttypescript-typingstypescript-generics

npm encountering difficulties in installing dependencies

I ran into an issue while trying to install npm modules. Everything goes smoothly until I attempt to install the dependencies of the installed modules. Here is the error log displayed by npm: $ sudo npm install -g npm ERR! addLocal Could not install . npm ...

node.jsunixterminalnpm

Obtain the values from this JSON array

o = { "photos": { "page": 1, "pages": 46, "perpage": 5, "total": "230", "photo": [{ "id": "6643924777", "owner": "34653895@N08", "secret": "3b7c2f6469", "server": " ...

javascriptjson

What is the best way to parse JSON data with Typescript?

I am dealing with JSON data structured as follows: jsonList= [ {name:'chennai', code:'maa'} {name:'delhi', code:'del'} .... .... .... {name:'salem', code:'che'} {name:'bengaluru' ...

jsontypescript

A variant of setTimeout designed specifically for family members

I am currently working on a program that involves creating a "health" variable which decreases by random amounts at random intervals. This means that a player may encounter scenarios like the following: 5 seconds Lose 20 health 3 more seconds Lose 25 healt ...

javascriptjquerysettimeout

Trouble with rendering inline images from markdown files in GatsbyJS

I've been trying to include inline images in my markdown file with the gatsby-remark-images plugin. However, I'm facing an issue where the image is not loading on my local host. I'm not sure if it's a syntax error or if I'm missing ...

javascriptreactjsgraphqlmarkdowngatsby

Retrieving data from a nested object with varying key names through ng-repeat

My JSON object contains various properties with unique names: var definitions = { foo: { bar: {abc: '123'}, baz: 'def' }, qux: { broom: 'mop', earth: { tree: 'leaf', water: 'fi ...

javascriptjsonangularjs

Handling JSON Data in JavaScript

In the script below, I have a json object that is being processed: $http({ url: '/mpdValidation/mpdValidate', method: "POST", data: { 'message' : mpdData } ).then(function(response) { console.log(response.data ...

javascriptarraysangularjsjsonangular

What could be causing the Kudu node version to not update even after the setting has been applied?

Struggling to deploy an Angular Application on Azure App Service, encountering a failed deployment with the following log: Command: "D:\home\site\deployments\tools\deploy.cmd" Handling ASP.NET Core Web Application deployment. Re ...

azurenpmnpm-installcontinuous-deploymentkudu

The function $http.get in AngularJS is providing an undefined response

In the process of developing a small Angular application, I started with this seed project: https://github.com/angular/angular-seed. The only modifications I made were to the following files: /app/view1/view1.js 'use strict'; angular.mod ...

javascriptjsonangularjs

How to dynamically alter a PHP variable using a JavaScript button click on the existing webpage

I've spent the last hour scouring stackoverflow for answers to my problem, but trying out solutions has only resulted in errors - perhaps because I'm attempting to implement it on the same page. I've experimented with saving the value to a ...

javascriptphphtmlajaxcookies

Issue: $injector:unpr Unrecognized Provider: itemslistProvider <-

I've spent several days debugging the code, but I can't seem to find a solution. I've gone through the AngularJS documentation and numerous Stack Overflow questions related to the error, yet I'm still unable to identify what's caus ...

javascripthtmlangularjsweb-services

An unidentified non-space character appeared following the JSON data on line 1, which was unexpected and at column

I am currently working on a WordPress site locally and my goal is to develop a hybrid app for it using AngularJS. Within WordPress, I have created a plugin to retrieve data. The metadata comes in the form of an array: (...) After converting this complex ...

javascriptphpjsonangularjswordpress

VueJs: utilizing computed properties within a looped property

Uncertainty clouds my judgment on whether the question title is the optimal approach for achieving my goal. To elaborate on the issue at hand: Within a Vue root component, I have a property specified within the data key, such as months. As I iterate over ...

vue.jsvuejs2vue-component

Double execution of the Angular customFilter function

My goal is to use a custom filter in Angular to filter an array. Essentially, I have a binding set up like this: {{ myData.winners | getWinnerString }}, which returns an array of items with a length ranging from 1 to 4. If the array consists of more than ...

javascriptarraysangularjs

Displaying a component in a router view based on specific conditions

Currently, I am delving into the world of Vue3 as a newcomer to VueJS. In my project, there is an App.vue component that serves as the default for rendering all components. However, I have a Login.vue component and I want to exclude the section when rende ...

javascriptvue.js

What steps can be taken to access the body prior to uploading a file using multer?

In my current project, the administrators are able to upload MP3 files and input parameters such as the song name. I have chosen to utilize the multer middleware for managing multipart/form-data. The issue I am facing is that req.body.gender always retur ...

javascriptnode.jsexpressmulter

Ways to invoke a specific component within ReactDOM.render in React

Currently, I am facing an issue where 2 components need to be rendered present in a single div using myProject-init.js, but both are getting called at the same time. In myProject-init.js file: ReactDOM.render( <div> <component1>in compone ...

javascriptreactjsreact-dom

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

javascripthtmlnode.jsmacoselectron