https://github.com/dimensi/vue-sprintf-components

Render format string like sprintf with vue components
https://github.com/dimensi/vue-sprintf-components

formatter sprintf vuejs

Last synced: 14 days ago
JSON representation

Render format string like sprintf with vue components

• Host: GitHub
• URL: https://github.com/dimensi/vue-sprintf-components
• Owner: dimensi
• License: mit
• Created: 2018-03-23T20:55:40.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-24T23:00:14.000Z (almost 7 years ago)
• Last Synced: 2024-11-14T02:18:13.574Z (about 1 month ago)
• Topics: formatter, sprintf, vuejs
• Language: JavaScript
• Homepage:
• Size: 101 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-sprintf-components

Sprintf with vue components

## Demo

[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1492m3ypq3)

## Install

Via Yarn:

```

yarn add vue-sprintf-components

```

Via NPM:

```

npm i vue-sprintf-components

```

## Quick start

```html

  


    

      

        Hello!

      

    

    

  


import VueSprintf from "vue-sprintf-components";

export default {

  components: {

    VueSprintf,

    ButtonUi: {

      template: '<button><slot></slot></button>'

    }

  }

};

```

## Usage

The component takes 2 props: `text` and `silence`

* text

  * type: `String`

  * required: `true`  

Any string with placeholders `{0}` and named placeholders `{name}`

* silence

  * type: `Boolean`  

If silence false, if there are not enough slots for placeholders, there will be an error

* placeholders

  * type: `Array|Object`  

Fallback placeholders if slots not enoght

## Example

### With args placeholders

```html

  

    Hello!

  

```

To render

```html

component say: Hello!

```

### With named placeholders

```html

  

    Hello!

  

  

    Bye-Bye!

  

```

To render

```html

component 'a' say: Hello! and component 'b' say: Bye-Bye!

```

### With named placeholders + fallback placeholders

```html

  

    Hello!

  

```

To render

```html

component 'a' say: Hello! and component 'b' say: Bye-Bye!

```

### With list placeholders + fallback placeholders

```html

  

    Hello!

  

```

To render

```html

component '0' say: Hello! and component '1' say: Bye-Bye!

```