Example implementation

[fusigabs]

Thanks for the work put into this. I would like to take it for a spin, and will appreciate any guidance in the implementation (as I see the docs seem to still be under development).

[khusseini]

Hi @nfunwigabga, I have today deployed the existing but sparse documentation to https://versa-stack.github.io/v-craft/develop/
But I will try to guide you through a simple setup here. In order to install the pacakge you will need to install some dependencies first. Of course this will require you to create a vue3 project (preferably with typescript) first.

npm create vue@3.2.0

Make sure use typescript and have it install pinia (2.x) as well.

Once you have the Vue3 application added and running you will need to install the latest alpha package

npm i @versa-stack/v-craft@0.1.0-alpha.2

There are some peer dependencies that will need to be installed, the best way to see which ones they are is by running

npm view @versa-stack/v-craft@0.1.0-alpha.2 peerDependencies

Install any of those listed packages which are not yet installed.

Since I use tailwindcss to style the editor it is recommended to add it as well https://v3.tailwindcss.com/docs/installation, otherwise you will have to take care of the styling.

Now you can simply copy the demo folder https://github.com/versa-stack/v-craft/tree/develop/docs/components to you local src/components and add the Editor component to you App.vue.

<script setup lang="ts">
import Editor from "./components/demo/editor-app/editor.vue";
</script>

<template>
  <Editor />
</template>

I hope this will get you started on a quick spin up for the editor.

[fusigabs]

Thanks. Looking good so far, but had issues installing at first because some of the peer dependencies are locked to earlier versions that the versions that come with a new Vue app (eg pinia store is locked to v2 while new vue apps come with v3.

[khusseini]

I'm glad you were able to get it to run. May I ask which vue create version you used initially? I assumed the npm create vue@3.2.0 would work.

[fusigabs]

I used latest and not 3.2.0...that's probably why npm create vue@latest

[khusseini]

Ah ok great. I'll be working on getting it to towel with vue@latest in the next couple of weeks.