https://github.com/chanlito/vuetify-tsx

Vuetify TSX is just a wrapper lib around vuetify components.
https://github.com/chanlito/vuetify-tsx

jsx tsx typescript vuetify vuetifyjs

Last synced: about 2 months ago
JSON representation

Vuetify TSX is just a wrapper lib around vuetify components.

• Host: GitHub
• URL: https://github.com/chanlito/vuetify-tsx
• Owner: chanlito
• Created: 2018-09-14T14:47:59.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:19:18.000Z (about 2 years ago)
• Last Synced: 2024-04-24T10:08:41.985Z (9 months ago)
• Topics: jsx, tsx, typescript, vuetify, vuetifyjs
• Language: TypeScript
• Homepage: https://vuetify-tsx.netlify.com
• Size: 3.5 MB
• Stars: 20
• Watchers: 5
• Forks: 6
• Open Issues: 30
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vuetify TSX

[![Netlify Status](https://api.netlify.com/api/v1/badges/f2703aa2-8278-4f58-9f2a-ffa5fe1bb5c5/deploy-status)](https://app.netlify.com/sites/vuetify-tsx/deploys)

Vuetify TSX is just a wrapper lib around vuetify components.

This lib uses [`vue-tsx-support`](https://github.com/wonderful-panda/vue-tsx-support) under the hood to support TSX (JSX for TypeScript).

## Setup

```bash

yarn add vuetify-tsx

# OR

npm install vuetify-tsx

```

## Usage

```tsx

import { component } from 'vue-tsx-support';

import { VApp, VContent } from 'vuetify-tsx';

// or import directly

import VApp from 'vuetify-tsx/lib/components/VApp';

import VContent from 'vuetify-tsx/lib/components/VContent';

const App = component({

  name: 'App',

  render() {

    return (

      

        

          

        

      

    );

  },

});

export default App;

```

For more examples, see the [examples](https://github.com/chanlito/vuetify-tsx/tree/master/src/views/examples) folder in this repository.  

You can see the examples by checking out the project and using `npm install` and then `npm run serve`.

## Tip

Use `babel-plugin-import` to reduce bundle size.

```js

// inside babel.config.js

module.exports = {

  presets: ['@vue/app'],

  plugins: [

    [

      'import',

      {

        libraryName: 'vuetify-tsx',

        libraryDirectory: 'lib/components',

        camel2DashComponentName: false,

      },

    ],

  ],

};

```

## Contributors

This project exists thanks to all the people who [contribute](https://github.com/chanlito/vuetify-tsx/graphs/contributors) 🚀!

## LICENSE

[MIT](https://opensource.org/licenses/MIT)