Ilaria  Dugg

Ilaria Dugg

1589190180

How to Publish a Vuejs Component on NPM

In this post, I will explain you now how to publish your own VueJs component on npm with a minify and ES5 build.

#vuejs-development #vuejs-2 #vuejs #github #npm

What is GEEK

Buddha Community

How to Publish a Vuejs Component on NPM
Ilaria  Dugg

Ilaria Dugg

1589190180

How to Publish a Vuejs Component on NPM

In this post, I will explain you now how to publish your own VueJs component on npm with a minify and ES5 build.

#vuejs-development #vuejs-2 #vuejs #github #npm

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Desmond  Gerber

Desmond Gerber

1617601020

Publish React Components As an Npm Package

This article will review how to publish React components as an npm package with Babel 7 (the latest version at the time of writing) and common errors.

I found myself copy-pasting my React components from project to project and wanted to create an npm package so I could import them easily. To do that, I had to learn how to publish an npm package. It was hard to find much updated info online about publishing React components with Babel 7, and I was getting plenty of build errors, so I decided to write this as a reference. This is going to assume React competence, but little-to-no experience using npm.

Take a look at the final  npm package and  GitHub repo

Pre-conditions:

  • Create an npm account and login. You can either login from the npm website or from the CLI by running npm login.
  • A React app. I created the boilerplate for this article with npx create-react-app npm-test. Run the app on your local machine.

1. Create and isolate components to publish

In the boilerplate app, I went into the **src **folder and deleted everything besides App.js, app.css, and index.js.

I also added a folder called lib that will store everything I want to publish on npm. Inside lib , there is a folder called components to store the component elements and a file called index.js to export them. (This seems to be a standard, based on other tutorials and the Carbon’s library.)

#nodejs #react #components #npm #babel

Publishing a Vue.js 3 Component on NPM

Publishing a Vue.js 3 Component on NPM

Source: https://github.com/lmiller1990/v-switch/
On npm: https://www.npmjs.com/package/@lmiller1990/v-switch

#vue #vuejs #npm #node #javascript

Earlene  Rowe

Earlene Rowe

1593805500

Creating and Publishing Multiple Vue Web and Library Components

I’ve been reading around on articles about creating vue web/lib components. However, I could not find one handling multiple components. There is also a little emphasis on producing different target builds — the Library and Web Components. Thence, here it is — my attempt to share my experience setting up a multiple web and library components using vue.

On this reading, we will cover the following parts:

  • Configuring two target builds: Web and Library builds
  • Handling multiple components
  • Publishing the vue components as a scoped package to npm
  • Bonus — usage of the new published package
  • Bonus — how to work with the new components and see it in action

I know most developers want to get on the gist right away, so let’s start.


Initial Setup

Pre-requisites

Make sure first that vue cli and vue cli-service-global was installed globally. They will be use on building packages and serving components

npm install -g @vue/cli @vue/cli-service-global

Create a vue project

vue create dxc-components

It will prompt you with some setup options, you should just choose “default” and hit enter.


Build Targets

We have to specify our build configurations and to do that, we need to make changes on package.json. In scripts, update that portion to have it like this —

"scripts": {
     "serve": "vue-cli-service serve",
     "build": "npm run build:wc & npm run build:lib",
     "lint": "vue-cli-service lint",
     "build:lib": "vue-cli-service build --target lib --name dxc-components 'src/main.js'",
     "build:wc": "vue-cli-service build --target wc --name dxc-components 'src/components/*.vue'"
   },

build:lib will build our package designed for library use. Example

import MyComponent from 'my-component';  

export default {
   components: {
       MyComponent,   
   },
  // rest of the component 
}

build:wc will allow usage via <script> tag directly in the browser . Example

<script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/my-component"></script>
... 
<my-component></my-component> 
...

the 'src/components/*.vue' , is the entry that will register multiple components found insrc/components directory. In our configuration,--name was set to dxc-components , with that, the result of the bundle will be registered as <dxc-components-my-component> . That is, if we have a component named MyComponent.vue in src/components .

**Note! **When you only have one component inside src/components the --name will be use as the tag element name. So, the resulting element will be <dxc-components /> instead of <dxc-components-my-component />

The build on script commands will allow us to easily build both lib and web components.

#npm #web-components #vue #components-library