Slide 1

Slide 1 text

Publishing Vue components to Publishing Vue components to NPM NPM By Jeremy Hall By Jeremy Hall 1 Publishing Vue components to NPM - By Jeremy Hall 

Slide 2

Slide 2 text

NPM Libraries NPM Libraries NPM lets people share their work with others all over the world! Some NPM Vue libraries we've used: vuetify vuex vue-i18n vue-clipboard2 vue-meta vue-qr ... and more 2 Publishing Vue components to NPM - By Jeremy Hall 

Slide 3

Slide 3 text

Sharing with NPM isn't hard! Sharing with NPM isn't hard! We can use Vue CLI to export a component as a library. 1. Create a new vue project 2. Setup package.json metadata correctly 3. Documentation 4. Create an NPM account 5. Build your library using Vue CLI 6. Publish to NPM 3 Publishing Vue components to NPM - By Jeremy Hall 

Slide 4

Slide 4 text

Browsing NPM Browsing NPM Some important information that you can nd on NPM Search: Name Description Author Keywords Version Link to vue on npm 4 . 1 Publishing Vue components to NPM - By Jeremy Hall 

Slide 5

Slide 5 text

And when you click a package And when you click a package Readme Homepage Repository (link to github, etc.) Basic statistics 4 . 2 Publishing Vue components to NPM - By Jeremy Hall 

Slide 6

Slide 6 text

Creating our project Creating our project See Install Vue CLI Install Vue CLI Create a project Create a project https://cli.vuejs.org/guide/installation.html yarn global add @vue/cli-service-global vue create my-component-project 5 Publishing Vue components to NPM - By Jeremy Hall 

Slide 7

Slide 7 text

Setup package.json Setup package.json Creating a project with Vue CLI will give you a basic package.json le. But you will want to make sure that these elds are lled out correctly so that people can easily nd, understand, and use your component 6 . 1 Publishing Vue components to NPM - By Jeremy Hall 

Slide 8

Slide 8 text

{ "name": "my_package", "description": "", "version": "1.0.0", "repository": { "type": "git", "url": "https://github.com/ashleygwilliams/my_package }, "keywords": [ "vue", "cool" ], "author": "", "license": "ISC", " " 6 . 2 Publishing Vue components to NPM - By Jeremy Hall 

Slide 9

Slide 9 text

Documentation is important Documentation is important We should document how our component works. Otherwise noone will use our component Create a readme.md le Use Codesandbox to show how to use your component with a working demo 7 . 1 Publishing Vue components to NPM - By Jeremy Hall 

Slide 10

Slide 10 text

readme.md file readme.md file Create a le in the root of your project: Github will display this le for you on your repository's page NPM will also show this le when people view your package The le is created using the Markdown language. A special language for adding features to text like titles, sections, lists, and code blocks. See readme.md https://guides.github.com/features/mastering- markdown/ 7 . 2 Publishing Vue components to NPM - By Jeremy Hall 

Slide 11

Slide 11 text

Codesandbox Codesandbox A free service that makes sharing demo code simple. Also easy for people to fork, edit, and test their own versions of your code: @nagoos/google-maps- autocomplete-vuetify Example Made by wallslide Files public favicon.ico index.html src App.vue main.js package json @nagoos/google-maps-autocomplete-vuet… Like Open in Editor App.vue package.json main.js index.html https://r2o5h.codesandbox.io/ Console 0 Problems 0 1 2 3 4 5 6 7 8 9 10 11 12

Slide 12

Slide 12 text

Setting up npm Setting up npm Go to and create an account https://www.npmjs.com 8 . 1 Publishing Vue components to NPM - By Jeremy Hall 

Slide 13

Slide 13 text

Install NPM Install NPM If you have NodeJS on your machine, you already have NPM installed. Get it at https://nodejs.org/en/ 8 . 2 Publishing Vue components to NPM - By Jeremy Hall 

Slide 14

Slide 14 text

Login via the CLI Login via the CLI Login using your npmjs account on the command line npm login 8 . 3 Publishing Vue components to NPM - By Jeremy Hall 

Slide 15

Slide 15 text

Building your library using Vue Building your library using Vue CLI CLI Example build command https://cli.vuejs.org/guide/build- targets.html#library vue-cli-service build --target lib --name google-maps-autocomplete-vuetify ./src/components/google-maps-autocomplete-vuetify/ index.vue 9 . 1 Publishing Vue components to NPM - By Jeremy Hall 

Slide 16

Slide 16 text

Vue cli service command vue-cli-service build 9 . 2 Publishing Vue components to NPM - By Jeremy Hall 

Slide 17

Slide 17 text

Creating a library --target lib 9 . 3 Publishing Vue components to NPM - By Jeremy Hall 

Slide 18

Slide 18 text

Name of the created les --name google-maps-autocomplete-vuetify 9 . 4 Publishing Vue components to NPM - By Jeremy Hall 

Slide 19

Slide 19 text

Path to target component ./src/components/google-maps-autocomplete-vuetify/ index.vue 9 . 5 Publishing Vue components to NPM - By Jeremy Hall 

Slide 20

Slide 20 text

Build result Build result 9 . 6 Publishing Vue components to NPM - By Jeremy Hall 

Slide 21

Slide 21 text

Setting up package.json Setting up package.json We have to point to the build- les in package.json les: We must include all les we want to include in npm here: dist/: The les that we built with Vue CLI src/: Lets bundlers use the .vue component directly unpgk: For embedding directly via CDN main: Standard way of using from NPM 9 . 7 Publishing Vue components to NPM - By Jeremy Hall 

Slide 22

Slide 22 text

Example Example "main": "./dist/google-maps-autocomplete-vuetify.common", "unpkg": "./dist/google-maps-autocomplete-vuetify.umd.min.js", "files": [ "dist/*", "src/*" ], 9 . 8 Publishing Vue components to NPM - By Jeremy Hall 

Slide 23

Slide 23 text

Publish to NPM Publish to NPM Publish the package to NPM: Running this command will make the package available on the NPM registry. npm publish 10 . 1 Publishing Vue components to NPM - By Jeremy Hall 

Slide 24

Slide 24 text

Updating package Updating package Each time we run the npm publish command, we need to increase the version eld in the package.json le, otherwise an error will be thrown. 10 . 2 Publishing Vue components to NPM - By Jeremy Hall   