Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
marwie authored Nov 10, 2023
1 parent 1cbf5c5 commit 5ce584b
Showing 1 changed file with 7 additions and 11 deletions.
18 changes: 7 additions & 11 deletions package/Runtime/Vue Project Sample/README.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
# Vue.js Integration

This sample demonstrates how to integrate the Vue.js HTML framework and a Needle scene.
This sample demonstrates how to integrate the [Vue.js](https://vuejs.org/) frontend framework and a Needle scene. The [vuejs project template](https://github.com/needle-engine/vuejs-sample) is hosted and downloaded from github.

The [Needle homepage](https://needle.tools) is built using Vue.js.
In this sample the needle engine web component is added to the [App.vue](https://github.com/needle-engine/vuejs-sample/blob/0d0e5b265c5dd26a65148fa3a94a0d1d5191e441/src/App.vue#L26) component. The content of the 3D scene integrates seamlessly with the web components: content uses zIndex to be either rendered in front or behind the 3D content.

## Package setup
Additionally the sample shows how an Animator and a animation statemachine (in this example setup and animated in Unity) can be controlled from the web frontend.

The package.json file contains the additional needed dependencies to use Vue together with vite and Typescript.

## Interaction between Vue and Needle

### Needle Engine as Vue component

The sample contains a simple wrapper for `<needle-engine>` so that it can be used as Vue component. This allows passing properties into Needle Engine, setting up events in both directions, and generally referencing Needle Engine and the scene context throughout your web app.
The sample is also networked. Send the sample URL containing the room name to a friend (or open it in a second browser window) and you will notice that the shown slide is synchronized between all users on the same website.

## Learn more

For more information, see the [Vue.js docs](https://vuejs.org/guide/introduction.html).
For more information, see the [Vue.js docs](https://vuejs.org/guide/introduction.html).

Our main website [needle.tools](https://needle.tools) is built using Vue.js.

0 comments on commit 5ce584b

Please sign in to comment.