Publishing Vue Components to NPM

By Jeremy Hall
Vue.js Tokyo Drinkup
#vuedrink

Transcript

1. 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 
2. 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 
3. 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 
4. 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 
5. 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 
6. 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 
7. 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 
8. { "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 
9. 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 
10. 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 
11. 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 <template> <v-app> <v-content fluid fill-height> <v-layout align-center justify-center> <v-flex xs11> <v-layout column> <v-card> <v-layout column> <GoogleMapsAutocomplete v-model="address" :restrict-to-countries="['jp']" @initialized="mapsLoaded = true 7 . 3 Publishing Vue components to NPM - By Jeremy Hall 
12. 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 
13. 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 
14. 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 
15. 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 
16. Vue cli service command vue-cli-service build 9 . 2 Publishing Vue components to NPM - By Jeremy Hall 
17. Creating a library --target lib 9 . 3 Publishing Vue components to NPM - By Jeremy Hall 
18. Name of the created les --name google-maps-autocomplete-vuetify 9 . 4 Publishing Vue components to NPM - By Jeremy Hall 
19. Path to target component ./src/components/google-maps-autocomplete-vuetify/ index.vue 9 . 5 Publishing Vue components to NPM - By Jeremy Hall 
20. Build result Build result 9 . 6 Publishing Vue components to NPM - By Jeremy Hall 
21. 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 
22. 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 
23. 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 
24. 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   