Publishing Vue Components to NPM

Publishing Vue Components to NPM

By Jeremy Hall
Vue.js Tokyo Drinkup
#vuedrink

Ed1259cf5e33c486668433ee0926dabf?s=128

vuedrink

June 10, 2019
Tweet

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   