Skip to content
Snippets Groups Projects
Verified Commit 9c085036 authored by Mateusz Tyszczak's avatar Mateusz Tyszczak :scroll:
Browse files

Add vue-vite and vue-webpack examples testing WASM in other frameworks

parent 5a1673bd
No related branches found
No related tags found
No related merge requests found
Pipeline #113743 failed
This commit is part of merge request !260. Comments created here will be created in the context of that merge request.
<template>
<main>You are using wax version: "{{ version }}"</main>
</template>
<script setup>
import { createWaxFoundation } from '@hiveio/wax';
import { ref, onBeforeMount } from 'vue';
const version = ref();
onBeforeMount(async () => {
const wax = await createWaxFoundation();
version.value = wax.getVersion();
});
</script>
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: (config) => {
config.resolve.fallback = {
fs: false,
path: false,
module: false,
crypto: false
};
}
})
# wax-vue
This template should help get you started developing with Vue 3 in Vite with our wax library.
## Project Setup
```sh
# Change your directory to vue dir
cd examples/ts/vue
# Create a vue project in current directory
pnpm create vue@latest .
# Run through all options
# Install all dependencies
pnpm install
# Add wax library (the dist-tag should be stable)
pnpm add @hiveio/wax@stable
```
### You can use the following code as a template for a simple App.vue code implementing wax
```vue
<template>
<main>You are using wax version: "{{ version }}"</main>
</template>
<script lang="ts" setup>
import { createWaxFoundation } from '@hiveio/wax';
import { ref, onBeforeMount } from 'vue';
const version = ref<string>();
onBeforeMount(async () => {
const wax = await createWaxFoundation();
version.value = wax.getVersion();
});
</script>
```
### Compile and Hot-Reload for Development
Navigate in your browser to the displayed web server location to listen to the project changes
```sh
pnpm dev
```
......@@ -19,7 +19,9 @@
"examples": "run-s examples:*",
"examples:html": "cd ../examples/ts/html && pnpm install && pnpm run test && cd ../../../ts",
"examples:nextjs-app": "cd ../examples/ts/nextjs-app && pnpm install && pnpm run build && cd ../../../ts",
"examples:node-app": "cd ../examples/ts/node-app && pnpm install && pnpm run test && cd ../../../ts"
"examples:node-app": "cd ../examples/ts/node-app && pnpm install && pnpm run test && cd ../../../ts",
"examples:vue-webpack": "cd ../examples/ts/vue-webpack && pnpm install && pnpm run build && cd ../../../ts",
"examples:vue-vite": "cd ../examples/ts/vue-vite && pnpm install && pnpm run test && pnpm run build && cd ../../../ts"
},
"exports": {
".": {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment