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.
UsedVite
/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!
# Install globally (recommended)
npm install -g vue-sfc-vite
vue-sfc-vite
# For immediate, no-install usage
npx vue-sfc-vite
# 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]
-
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
- 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:[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<style scoped lang="scss"> @import "../assets/scss/<%= componentName %>.scss"; </style>
<script lang="ts/js">...</script>
tag of theSFC
, 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 theSFC
as shown above. Also, make sure that you have installedsass
andsass-loader
as dev dependencies. If not, then install them using the following command:npm install -D sass sass-loader
. For more information, visit here.]
- In
- ๐ฆ 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.