Skip to content
This repository has been archived by the owner on Jul 12, 2024. It is now read-only.
/ vuetify-tsx Public archive

Vuetify TSX is just a wrapper lib around vuetify components.

Notifications You must be signed in to change notification settings

chanlito/vuetify-tsx

Repository files navigation

Vuetify TSX

Netlify Status

Vuetify TSX is just a wrapper lib around vuetify components.

This lib uses vue-tsx-support under the hood to support TSX (JSX for TypeScript).

Setup

yarn add vuetify-tsx
# OR
npm install vuetify-tsx

Usage

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 (
      <VApp>
        <VContent>
          <router-view />
        </VContent>
      </VApp>
    );
  },
});

export default App;

For more examples, see the 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.

// 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 🚀!

LICENSE

MIT