Vue plugin for Desech Studio

Install

• In Desech Studio
  • Go to Settings > Plugins > Vue and install it
  • Go to File > Project Settings > Export Code Plugin > set to "Vue"

Test the vue app

• In Desech Studio add an element and Save.
• Every time you save, the vue app files will be copied over to the _export folder of your desech project.
• Know that while Desech Studio creates new vue component files and only updates the named sections, it will not cleanup components that you have removed/moved/renamed. This also applies to storybook files. You will have to manually remove the unneeded vue files.
• There you can run the following, to test the vue app:

npm install --force
export NODE_OPTIONS=--openssl-legacy-provider # linux / mac os only
set NODE_OPTIONS=--openssl-legacy-provider # windows only
npm run serve

• Now you can access your vue app at http://localhost:4200/
• Every time you save inside Desech Studio, it will push updates to the vue app

Storybook integration

• Check the docs for further reading

export NODE_OPTIONS=--openssl-legacy-provider # linux / mac os only
set NODE_OPTIONS=--openssl-legacy-provider # windows only
npm run storybook

• Check the _export/src/stories folder for the actual stories

Desech Studio integration

Tips

• Anchor links need to follow this format /contact.html with a backslash at the beginning and an .html extension at the end
  • <a> elements are not converted to <router-link> because of how overrides work. You will have to add your own page history code to the application.
• Anywhere inside text you can write code like {{user.userId}} and it will be exported as vue js code. If you don't want that, then add the property v-pre without a value, to the element.
  • Element attributes and properties are not converted to code. You need to use properties like :foo to make sure the value is rendered as code.
  • If you add it as a component override, then it will no longer be parsed as code.
• Inside Desech Studio you can add vue directives in the Programming properties for both elements and components, like :title, @click, v-for, etc.
  • Although we do allow any property name, if you use something like foo$:@{_ and it obviously throws an error in vue, that's on you to handle.
  • v-if, v-for, v-pre, v-cloak and v-once can't be overridden.
  • If you override the inner html of an element and you also have a v-if and v-for on it, if the variables set in the declarations are not found anywhere else, than vue will complain about unused variables. That's because when Desech Studio overrides inner html, it moves everything in a variable, so the actual html is no longer visible in the html template.
  • Other directives can be overridden, but the actual value will be a string, not code.
  • For v-text and v-html make sure to use a block element and then set the property value as a variable in the data() method
  • :class and v-bind:class properties are ignored
• unrender uses v-if, so you can't have v-if or v-for with unrendered elements
• You can't use the html element <slot> because vue uses this internally for component holes.

Plugin Development

• That's it. Ignore the rest if you don't plan on doing development on this plugin.
• It's also probably best to have Desech Studio closed during this step.
• If you plan on helping out with code or extend this plugin, do the following:

cd "/home/<username>/.config/Desech Studio/plugin"
  - this is the plugins folder of `Desech Studio` on Linux
  - on Mac it's `/home/<username>/Library/Application Support/Desech Studio/plugin`
  - on Windows it's `C:/Users/<username>/AppData/Roaming/Desech Studio/plugin`
rm -rf desech-studio-vue
  - if you have the vue plugin already install, delete it
git clone git@github.com:desech/studio-vue.git desech-studio-vue
  - you might need to use your own fork of this repo on github
cd desech-studio-vue
sudo npm install -g @vue/cli
npm install --force
cd dist
rm -rf *
vue create my-app
  Preset: Vue 3
  Package: NPM
cd my-app
npm install vue-router
vue add router
  Proceed: yes
  History: yes
npx sb init
- open `.storybook/main.js` and add `"staticDirs": [ "../public" ],`
rm -rf node_modules public package-lock.json
cd src
rm -rf assets components views router stories

• open App.vue and replace everything with:

<template>
  <router-view/>
</template>

<script>
export default {
  name: 'App'
}
</script>

• Now Desech Studio will use this git repository for the vue plugin instead of the standard one.
• Warning: Make sure you don't touch the version in the package.json file, because Desech Studio will try to upgrade and it will delete everything and re-download the new version of this plugin.
  • Only update the version when you git push everything and you are done with development

Included npm packages

All Desech Studio plugins have access to the following npm libraries, because they come with the application:

• lib.AdmZip adm-zip
• lib.archiver archiver
• lib.fse fs-extra
• lib.jimp jimp
• lib.beautify js-beautify
• lib.jsdom jsdom
• lib.fetch node-fetch

Other Documentation

• Go to v3.vuejs.org to read the documentation.