Dev environment?

[tve]

Can someone briefly describe how to get a dev environment going, specifically for @ark-ui/vue?
After cloning the repo, I can run pnpm i in the packages/framework/vue dir, but linking to it from my project dir doesn't seem to work.
Thanks!

[Omikorin]

Did you use pnpm build?

[tve]

Yes. And then? How can I use that in my little test project? I tried:

pnpm i ../ark/packages/framework/vue/
pnpm run dev

Vite starts (it's a pretty plain project) but then in the browser I get

Uncaught ReferenceError: React is not defined
    Tabs tabs.tsx:17
    ...

I did blow away my node_modules but no change...

[Omikorin]

Please provide a minimal reproduction example (repo or codesandbox). Without this, I can't tell you what's wrong.

[tve]

I created codesandbox (first time using that...): https://codesandbox.io/p/github/tve/ark-vue-dev/main

• I started with a devbox from the ark repository
• cd packages/frameworks/vue; pnpm i; pnpm run build
• I created a vue project scaffold in the demo directory (top level of the sandbox)
• I pnpm installed ../packages/frameworks/vue
• I added a crude Dialog to App.vue
• pnpm run dev
• when it tries to render the page it gets Uncaught ReferenceError: React is not defined

When you launch the sandbox I believe you need to repeat the pnpm commands (install and build in packages/frameworks/vue and then install and run dev in demo).

If you replace the dependency in package.json with @ark-ui/vue: ^0.9.0 it works fine.

[tve]

update: I added the install/build steps to the setuptasks. when they're done, open a terminal and run cd demo; pnpm run dev, then wait for preview to come up, open the console and if the react error doesn't show, click on refresh at the top of the preview pane.

[tve]

I did figure out the origin of the React is not defined issue: I needed to add VueJsx to the plugins in my vite config: plugins: [vue(), VueJsx()],.

[cschroeter]

@tve

Thanks for taking your time to create this discussion. I would recommend you using Storybook (Histoire for Vue) and Vitest for testing like described below:

git clone [email protected]:chakra-ui/ark.git
cd ark
pnpm i

For Storybook (Histoire)

pnpm vue storybook

For Tests

pnpm vue test

You can also change dir in to the Vue package and run scripts directly in the vue folder:

cd packages/frameworks/vue

# storybook
pnpm storybook

# tests
pnpm test

[tve]

OK, but how can I use this dev checkout of ark-ui/vue in my project so I can see everything in action without having to create test cases / repros for everything? I can't really discover a problem if I can't use ark-ui/vue in my project and bump into the problem in the first place...

[cschroeter]

Ah you can add a Nuxt project like we have done for React under /templates.

Feel free to create a PR to add this vue example template to the project.