Summary:

• Install vue-sfc-rollup for scaffolding.
• Create a Vue2 module setting with typescript support.
• Run for internal development.
• Pack and install in other local project.
• Publish to NPM.

This post is about a step by step guid for creating a Vue2 module with Rollup and setting typescript support. Finally is explained the basis for running, installing and publishing.

We start with Rollup

I found in rollup a great tool for creating npm modules. Is particulary easy to understend, no need so much configuration but it's open for add more extras depending of your needs.

And... exists vue-sfc-rollup a cli module for scaffolding Vue SFC components, it may be for one component or a library.

1 - Install it globally

npm i -g vue-sfc-rollup

This allows to work the cli on any location.

2 - Go to your project's folder and run:

sfc-init

The wizard ask for some options as follows.

3 - Is Single component or Library?

We select the second.

3 - What's the name?

4 - Prefer Javascript or Typescript?

Of course we select the second now.

5 - And the location?

Remember don't need to create the project folder at first, is created with this prompt.

And that's all, wizard ends, go to your new module folder.

The module guts

vue-sfc-rollup create for us this structure.

Now I explain a little each one by folder:

build

Host the rollup configuration and nothing else.

dev

Here you can do everything you need to see works the module before installing in other place. As you can see contains a basic component to import the library code.

src

Of course has the real library code organized in lib-components subfolder.

That index.ts file is specific to englobe all library components.

The entry.ts file is big important. It expose the library to rollup build process. Generaly you don't need to modify entry.ts except for expose another type of file. I use for exporting Non-vue utilities usualy.

The rest of the files are some browser, babel and typescript config. Update depending of your needs.

Install and Run

The scaffolding create this without installing node modules. Run npm install and npm run serve then.

Is created a local server on 8080 port by default. The current configuration validates typescript syntax here.

If you open the url you can see the default component example.

Add more components

Here was created a library starting with a default component but more could be added.

Only remember to add into index.ts like following.

The presented syntax is so cool. You may change this but the objective is to import and export in one line.

Using Typescript

As shown in the example you can implement Typescript, and it's specially useful in this case for validating the common options into the component, I recomend to create the interfaces, classes and other structures in specific files.

Also the default example shows a particular syntax to get data from component state. I recommend to change in tsconfig.ts settings the noImplicitThis property to false because we ussualy don't need to validate "this" in Vue with options api.

Now simplificate the component as next.

Is not the intention to create a complex library, that's for other post. So now go to local installation.

Packing in a box

Seeing the package.json, it has some commands to build the library in the dist folder depending of the distribution way.

• build:ssr, For Server Side Rendering.
• build:es, Build as Ecma Script module, this is usualy what we want on a common Vue/Spa project.
• build:unpkg, Use this if need to link directly in browser, by a CDN for example.
• build, You can use all of previews as one if preffered.

Also I recomend to add this script:

"prepublish": "npm run build"

That is becouse you need to create the bundles before publish (or pack if is the local scenario).

Also in package json is found the configuration to set the correspondig entry point matching with distribution way. And the files to include into the packed module.

As you can see the *d.ts file is include to provide typescript information about the library.

The src folder may be not included except if you want to provide another way to import the components. With the bundles, the parent project only take care on implementing (if compatible). With the source code the parent project now need to asure to build correctly too, posiblelly you as library creator must know a little more about who will use your library in order to maintain compatibility.

Finally we run npm pack. This create a gziped file into the project (remember don't commit it).

Go to other project and install it pointing to the relative gziped file path.

Each change you do in the source code, new pack and new install on to do, the pros of this is no need to update version neither expose uncompleted changes to public.

Publish to npm

If it's ready, now publish to the public NPM repository or a private if case.

Remember to login (npm login) with your npm credentials

Finally run npm publish, keep calm and exhale too.

As explained before the prepublish command runs before send to the repository.

And it's over, now you have a Vue module made easy with rollup and well validated thanks to typescript.

In the future we are going to create content to profundice on some areas about javascript, vue modules, and a something more.

Thankyou for reading.