https://github.com/kekkorider/vue-tres-starter

https://github.com/kekkorider/vue-tres-starter

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/kekkorider/vue-tres-starter
• Owner: kekkorider
• Created: 2023-09-08T17:19:50.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-21T10:17:42.000Z (3 months ago)
• Last Synced: 2024-08-21T11:44:24.966Z (3 months ago)
• Language: Vue
• Homepage: https://vue-tres-starter.vercel.app
• Size: 9.35 MB
• Stars: 32
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# Vue 3 + TresJS starter

![Short gif demonstrating how the starter works](./.github/demo.gif 'Demo GIF')

## What's included

### 1. Demo GLTF model

The `` component in `/components/Suzanne` loads a custom GLTF model and uses a custom `ShaderMaterial`.

### 2. Box with click handler

The `` component rotates and floats on every tick and has click/hover handlers.

### 3. GSAP as a Vue Composable

GSAP is included as a composable and can be included in any component the following way:

```js

import { useGSAP } from '@/composables/useGSAP'

const { gsap } = useGSAP()

```

The composable file is located in `/src//composables/useGSAP.js`.

### 4. Pinia

[Pinia](https://pinia.vuejs.org/) is already included and configured.

The states are stored in the `/src//stores` folder.

## Setup

Make sure to install the dependencies:

```bash

# yarn

yarn install

# npm

npm install

# pnpm

pnpm install

```

## Development Server

Start the development server on `http://localhost:3000`

```bash

# yarn

yarn dev

# npm

npm run dev

# pnpm

pnpm run dev

```

## Production

Build the application for production:

```bash

# yarn

yarn build

# npm

npm run build

# pnpm

pnpm run build

```

Locally preview production build:

```bash

# yarn

yarn preview

# npm

npm run preview

# pnpm

pnpm run preview

```