Editing Vue
How to edit .vue repository files right from the plugin in Dev Mode: the code folder in the Git connection, the file tree, the editor, View diff, Save & Publish with conflict checks and quick binding with the Connect button.
On the Code Connect tab in Dev Mode you can open a .vue file from the repository, edit it and publish it as one commit without leaving Figma.
What you need first
- An active Git connection in the plugin footer.
- The Code folder field filled in the settings of that connection for Dev Mode: the repository folder the file tree is built from.
- A configured Repository connection for Code Connect if you plan to bind files.
A connection with a code folder is only needed for editing sources. Tokens and data are still synchronized from the settings in Design mode.
Work area
| Part | What is in it |
|---|---|
| The tree on the left | Folders and files from the code folder, expanded on click. Only .vue files are editable. Files linked through Code Connect are marked with a check. The refresh button rereads the tree |
| The editor on the right | Highlighting by extension, a status bar with the language, line count and sync state. The Uncommitted mark means unsaved edits |
| Buttons above the editor | View diff, Save & Publish, Connect |
Save & Publish
- The plugin rereads the file in the repository.
- If the file has not changed since it was opened, the commit goes out right away.
- If the file has changed, a conflict window opens with a diff and a choice:
- Overwrite remote: publish your version over the changes in the repository;
- Reload from remote: take the repository version and lose the local edits;
- Cancel.
After publishing, the Uncommitted mark is cleared and the editor remembers the new version as its baseline. The default commit message is [SXL Studio] Update <file path>.
Shortcut: Cmd + S on macOS, Ctrl + S on Windows and Linux.
View diff
View diff shows a comparison of your version with the repository version without publishing. Look at it before Save & Publish to check the size of the change.
Connect
Connect links the open .vue file with the component or component set selected on the canvas: a Vue 3 binding is created and the Code Connect registry file is updated. The button is disabled when no component is selected or Repository URL is not set in the repository settings. More: Code Connect and Storybook.
Protection against loss
- When switching to another file with unsaved edits, the plugin asks for confirmation.
- Publishing never silently overwrites someone else's changes: on divergence the conflict window opens.
- If publishing fails, the edits stay in the editor.
Limits
- Existing
.vuefiles are edited; a new file cannot be created from this tab. - There is no component preview here.
- For a connection with only a code folder, Pull may report there is nothing to update: this tab works with code, not with tokens.