https://github.com/jaypalm/jsme-vue
Vue component wrapper around JSME-Editor
https://github.com/jaypalm/jsme-vue
chemistry molecules
Last synced: 8 months ago
JSON representation
Vue component wrapper around JSME-Editor
- Host: GitHub
- URL: https://github.com/jaypalm/jsme-vue
- Owner: JayPalm
- Created: 2022-08-17T23:56:17.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-01T22:50:11.000Z (almost 4 years ago)
- Last Synced: 2025-02-03T08:48:25.024Z (over 1 year ago)
- Topics: chemistry, molecules
- Language: Vue
- Homepage:
- Size: 28.3 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JSME Vue
Vue wrapper for [JSME-Editor](https://github.com/jsme-editor/jsme-editor.github.io)
## Background
[SMILES](https://en.wikipedia.org/wiki/Simplified_molecular-input_line-entry_system) is a means of specifying the molecular structure of a chemical species as a string.
This component wraps [JSME-Editor](https://github.com/jsme-editor/jsme-editor.github.io) in an easy to use Vue component. All credit to the original authors (Peter Ertl and Bruno Bienfait), as this package simply makes their chemical drawer easier to use in a Vue app. The core JSME-Editor is initialized by adding a script to the document head, which adds several more scripts neccessary for the editor to load and function.
## Installation
`jsme-vue` is available via [npm](https://www.npmjs.com/package/jsme-vue): `npm i jsme-vue`
## Example Usage
Used in a Vue component, using Composition API.
```vue
import { ref, watch } from "vue";
const smiles = ref("c1ccccc1");
watch(smiles, () => {
// Perform action on smiles change.
console.log(smiles.value);
}
```