Skip to content

[Cookbook] Packaging a Vue Single File Component (SFC) to share on npm #1545

Closed
@mgdodge

Description

@mgdodge

I have code and documentation that I prepared as part of my lightning talk at VueConfUS 2018, and was told it would be a great addition to the cook book.

  • Solve a specific, common problem: I was unable to find any concise documentation describing the steps required to package my SFC to share via npm. This recipe would describe the minimal steps to get an SFC ready to publish to npm.
  • Start with the simplest possible example: Simple example includes a total of 3 files outside the sample SFC itself. Those 3 files are all very brief and well documented.
  • Link to other docs, rather than re-explaining concepts: I provide links to the official npm documentation which describe how to name npm packages, what fields to include, etc.
  • Explain the process, rather than just the end result: While I did write a wizard to automate the process, I intentionally kept things as simple as possible so that the process would be easy to explain through comments, easily identified/editable template strings, and sample bash commands. This process would be explained in the recipe.
  • Explain the pros and cons of your strategy, including when it is and isn’t appropriate: I point out that this is a great way to quickly publish simple components, but is not meant to replace the full development experience orchestrated by the vue cli. This is also not a good candidate (as written) for full applications or complex components with multiple external resources (CSS, images, etc.) though those could be added to this recipe as an exercise for the user.
  • Mention alternative solutions...: The reason I wrote this recipe was because I was unable to find any adequate alternatives. I found one or two templates for getting started, but nothing that was very simple and included the entire process. Happy to link to any that I find in the meantime, or suggestions to others. Also, this uses rollup instead of webpack, but this could very easily be done with webpack (especially now that v4 has tree-shaking abilities as well.)

My npm submission for this, found at https://github.com/mgdodge/vue-sfc-rollup, includes a lot of the example code and README content that would go into this recipe. A proper PR will be made when this is accepted as a recipe.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions