Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guidevloper/nullstack-vueable
:green_heart: Making Nullstack framework able to read Vue basic template syntax
https://github.com/guidevloper/nullstack-vueable
element nullstack plugin vuejs
Last synced: 9 days ago
JSON representation
:green_heart: Making Nullstack framework able to read Vue basic template syntax
- Host: GitHub
- URL: https://github.com/guidevloper/nullstack-vueable
- Owner: GuiDevloper
- License: mit
- Created: 2021-03-25T13:37:18.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-09-01T18:57:18.000Z (about 1 year ago)
- Last Synced: 2024-09-21T19:51:33.860Z (about 2 months ago)
- Topics: element, nullstack, plugin, vuejs
- Language: JavaScript
- Homepage:
- Size: 47.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nullstack Vueable
Making Nullstack framework able to read Vue basic template syntax
## Installation
Run this command on your Nullstack project:
```sh
npm install nullstack-vueable -D
```
or, using Yarn:
```sh
yarn add nullstack-vueable -D
```
Then import it in your **index.js** file (as shown here in **tests/index.js**):
Then import it in your **client.js**/**server.js** files (as shown here in [**tests/client.js**](./tests/client.js)):
```js
import vueable from 'nullstack-vueable';
Nullstack.use(vueable);
```
## Examples
> All of this can be seen being used on tests folder
### `v-for`
```jsx
array = [25, 1, {data: {data2: 10}}, {data: {data2: 20}}];
renderVFor() {
return (
<>
item.data.data2
Double array
>
)
}
```
### `v-if`
```jsx
showTitle = true;
renderVif() {
return (
<>
Element to be hidden
Toggle title
>
)
}
```
### `v-html`
```jsx
boldTitle() {
return `${this.title}`;
}
renderVhtml() {
return (
)
}
```
### `v-model`
```jsx
title = 'Nullstack';
renderVModel() {
return (
)
}
```
### Use of it all in the [`render`](https://nullstack.app/renderable-components) function
```jsx
render() {
return (
<>
>
)
}
```