Skip to content

Latest commit

 

History

History
85 lines (65 loc) · 3.25 KB

README.md

File metadata and controls

85 lines (65 loc) · 3.25 KB
Raw

Vue SFC Vite - A Vue 3 SFC Vite template

A package to create Vue 3 SFC Vite projects.
Inspired by VueSFCRollup
VueSFCRollup was a great package to create SFC Rollup projects. But after there deprecation of the package, we decided to create a similar package for Vite.

Used Vite/Library Mode configuration to create a single file component template for Vue 3 (Supports Vue 2 as well).

vue-sfc-vite is a CLI templating utility that scaffolds a minimal setup for compiling a Vue Single File Component ( SFC) - into a form ready to share via npm. It doesn't assume any particular flavor of CSS or docs generator, so you can use what you're already used to. It's the fastest way to produce npm-ready vue components!

Installation

Install globally

# Install globally (recommended)
npm install -g vue-sfc-vite
vue-sfc-vite

OR use via npx

# For immediate, no-install usage
npx vue-sfc-vite

Usage

# Fill in prompts

# Navigate to library folder
cd path/to/my-component-or-lib
npm install

## Create a SFC
vue-sfc-vite

[Note: visit here to get the installation guide for mono-repo using lerna]

SFC Options

  • Which version of Vue are you writing for?

    • Vue 3
    • Vue 2

  • Is this a single component or a library?

    • Single Component

  • What is the npm name of your component?

    • my-component

  • What is the kebab-case tag name for your component?

    • my-component

  • Will this component be written in JavaScript or TypeScript?

    • TypeScript
    • JavaScript

  • Enter a location to save the component files:

    • ./my-component

Add styles to your component

  • Visit my-component/src/assets/scss/my-component.scss and add your styles to the file.
    • In my-component.vue file, import the styles file as shown below: 
      <style scoped lang="scss">
  @import "../assets/scss/<%= componentName %>.scss";
</style>
      [Note: Importing styles in this way will make sure that the styles are scoped to the component. But if you import the styles in the <script lang="ts/js">...</script> tag of the SFC, then the styles might not work as expected. So, it's recommended to import the styles in the <style scoped lang="scss">...</style> tag of the SFC as shown above. Also, make sure that you have installed sass and sass-loader as dev dependencies. If not, then install them using the following command: npm install -D sass sass-loader. For more information, visit here.]

Features

  • 📦 Single File Component - Create a single file component for Vue 3.
  • 📦 Vue 2 Support - Create a single file component for Vue 2.
  • 📦 Vue 3 Support - Create a single file component for Vue 3.
  • 📦 Vue 3 Composition API - Create a single file component for Vue 3 with Composition API.
  • 📦 Vue 3 Composition API + Vue 2 Support - Create a single file component for Vue 3 with Composition API and Vue 2 Support.