https://github.com/iosamuel/vite-plugin-vue-sfc-in-js

Vue SFC in JS files
https://github.com/iosamuel/vite-plugin-vue-sfc-in-js

Last synced: about 2 months ago
JSON representation

Vue SFC in JS files

• Host: GitHub
• URL: https://github.com/iosamuel/vite-plugin-vue-sfc-in-js
• Owner: iosamuel
• Created: 2023-02-27T03:11:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-02-27T17:59:17.000Z (over 1 year ago)
• Last Synced: 2024-04-09T23:05:18.154Z (about 2 months ago)
• Language: TypeScript
• Size: 6.84 KB
• Stars: 26
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-vite - vite-plugin-vue-sfc-in-js - Vue SFC syntax in JS files, allows to create multiple components in a single .js file. (Get Started / Templates)

README

        
# Vue SFC in JS 🔰

```bash

npm install vite-plugin-vue-sfc-in-js

```

---

The objective of this plugin is to allow developers to write SFCs inside JS files, similar to JSX... in some way.

For example:

```js

export const ClearCartIcon = (

  

    

      

        

        

        

        

        

        

      

    

  

);

export const CartIcon = (

  

    

      import {ref} from "vue"; console.log("Hello!"); const refVar = ref("");

    

    

      

        

        

        

        

        

      

    

  

);

```

As you can see, the main advantage here is that we can export multiple components from the same `.js` file and use it like a normal component inside other Vue components.

```vue

import { ClearCartIcon, CartIcon } from "./Icons";

```

## Usage

Add this plugin to `vite.config.js`

```js

import { defineConfig } from "vite";

import vueSFCinJS from "vite-plugin-vue-sfc-in-js";

export default defineConfig({

  plugins: [vueSFCinJS()],

});

```

And start writing SFC in your JS files, by using a similar syntax as JSX, just make sure to wrap your SFCs in a `` Tag.

You can use either a `.js` or a `.vjs` file if you feel it more convenient.

```js

export const CartIcon = (

  

    // Can use Script

    

      
Can use Template

    


    /* not implemented */

  

);

```

## 🤔 Why?

For now, this is just a very naive and simplistic POC to see if actually more Devs would like and use this kind of solution.

So if you actually like it, please remember to ⭐️ the repo and 📦 `npm install` the heck out of it.

### Problem to solve

In Vue world, for example if you want to have multiple Icons and use them, you would need to create an `Icons` folder and create multiple `.vue` files, one per icon.

### Solution

With VJS you only need an `Icons.[v]js` file and export all the components you want using JS + SFC syntax!

## Author

Samuel Burbano - @iosamuel

## License

ISC