Skip to content

Commit 196d73b

Browse files
Merge pull request #14 from nickfrosty/nuxt-support
native nuxt support
2 parents 0bf352a + 6293c38 commit 196d73b

File tree

6 files changed

+132
-14
lines changed

6 files changed

+132
-14
lines changed

.vscode/settings.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
{
2-
"compile-hero.disable-compile-files-on-did-save-code": false
2+
"compile-hero.disable-compile-files-on-did-save-code": false,
3+
"vetur.validation.template": false,
4+
"vetur.validation.script": false,
5+
"vetur.validation.style": false,
6+
"vetur.format.options.tabSize": 2,
37
}

README.md

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
# Simple CodeEditor for Vue.js
22

3-
4-
5-
63
website: [simple-code-editor.vicuxd.com](https://simple-code-editor.vicuxd.com)
74

85
It's easy to use, both support read-only and edit mode, you can directly use it in the browser or import the JavaScript modules via the NPM package
96

7+
## Usage
108

9+
There are 3 common ways that you can use the `simple-code-editor` package:
1110

12-
## Useage
11+
1. Vue in the browser
12+
2. Vue via NPM
13+
3. NuxtJS via NPM
1314

14-
#### In the Browser
15+
### 1. Vue in the Browser
1516

1617
Step 1. Add the CSS file.
1718

@@ -35,20 +36,21 @@ const app = Vue.createApp({
3536
}
3637
})
3738
```
39+
3840
```html
3941
<code-editor></code-editor>
4042
```
4143

44+
### 2. Usage with Vue via NPM
4245

43-
44-
#### Install with NPM
45-
46-
Step 1
46+
Install the `simple-code-editor` package from NPM:
4747

4848
```shell
4949
npm install simple-code-editor
5050
```
51-
Step 2. Importing the component and registration.
51+
52+
Importing the component and registration.
53+
5254
```javascript
5355
import CodeEditor from 'simple-code-editor';
5456
export default {
@@ -57,10 +59,40 @@ export default {
5759
}
5860
}
5961
```
62+
6063
```html
6164
<CodeEditor></CodeEditor>
6265
```
6366

67+
### 3. Usage with NuxtJS via NPM
68+
69+
Install the `simple-code-editor` package from NPM:
70+
71+
```shell
72+
npm install simple-code-editor
73+
```
74+
75+
In your `nuxt.config.js` file, add the `simple-code-editor` module:
76+
77+
```js
78+
modules: [
79+
"simple-code-editor/nuxt",
80+
]
81+
```
82+
83+
After adding the global module, you will be able to use the `code-editor` or `CodeEditor` component throughout your Nuxt project:
84+
85+
```vue
86+
<template>
87+
<client-only>
88+
<code-editor value="console.log(13)"></code-editor>
89+
<!-- or -->
90+
<CodeEditor value="console.log(13)"></CodeEditor>
91+
</client-only>
92+
<template>
93+
```
94+
95+
**NOTE:** While using the code editor with Nuxt, it is recommended to wrap each `CodeEditor` component with the `client-only` tags like the example above. This will prevent a client side hydration error.
6496

6597

6698
#### Customizing the theme style

project/package/README.md

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,53 @@ website: [simple-code-editor.vicuxd.com](https://simple-code-editor.vicuxd.com)
77

88
It's easy to use, both support read-only and edit mode, you can directly use it in the browser or import the JavaScript modules via the NPM package
99

10+
## Usage
1011

12+
There are 3 common ways that you can use the `simple-code-editor` package:
1113

12-
## Useage
14+
1. Vue in the browser
15+
2. Vue via NPM
16+
3. NuxtJS via NPM
1317

18+
### 1. Vue in the Browser
1419

15-
Step 1
20+
Step 1. Add the CSS file.
21+
22+
```html
23+
<link rel="stylesheet" href="/path/code_editor.min.css">
24+
```
25+
26+
Step 2. Add the JavaScript files after the `vue.js` file.
27+
28+
```html
29+
<script src="/path/highlight.min.js"></script>
30+
<script src="/path/code_editor.prod.js"></script>
31+
```
32+
33+
Step 3. Declaring the component, and using the customized tag into the HTML template. For all configure items please check the [API](#api) list.
34+
35+
```javascript
36+
const app = Vue.createApp({
37+
components: {
38+
'code-editor': CodeEditor
39+
}
40+
})
41+
```
42+
43+
```html
44+
<code-editor></code-editor>
45+
```
46+
47+
### 2. Usage with Vue via NPM
48+
49+
Install the `simple-code-editor` package from NPM:
1650

1751
```shell
1852
npm install simple-code-editor
1953
```
20-
Step 2. Importing the component and registration.
54+
55+
Importing the component and registration.
56+
2157
```javascript
2258
import CodeEditor from 'simple-code-editor';
2359
export default {
@@ -26,10 +62,40 @@ export default {
2662
}
2763
}
2864
```
65+
2966
```html
3067
<CodeEditor></CodeEditor>
3168
```
3269

70+
### 3. Usage with NuxtJS via NPM
71+
72+
Install the `simple-code-editor` package from NPM:
73+
74+
```shell
75+
npm install simple-code-editor
76+
```
77+
78+
In your `nuxt.config.js` file, add the `simple-code-editor` module:
79+
80+
```js
81+
modules: [
82+
"simple-code-editor/nuxt",
83+
]
84+
```
85+
86+
After adding the global module, you will be able to use the `code-editor` or `CodeEditor` component throughout your Nuxt project:
87+
88+
```vue
89+
<template>
90+
<client-only>
91+
<code-editor value="console.log(13)"></code-editor>
92+
<!-- or -->
93+
<CodeEditor value="console.log(13)"></CodeEditor>
94+
</client-only>
95+
<template>
96+
```
97+
98+
**NOTE:** While using the code editor with Nuxt, it is recommended to wrap each `CodeEditor` component with the `client-only` tags like the example above. This will prevent a client side hydration error.
3399

34100

35101
#### Customizing the theme style

project/package/nuxt/module.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const path = require('path')
2+
module.exports = function () {
3+
this.nuxt.hook('build:before', () => {
4+
this.addPlugin({
5+
src: path.resolve(__dirname, 'plugin.js'),
6+
mode: 'client',
7+
fileName: 'CodeEditor',
8+
});
9+
});
10+
}

project/package/nuxt/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"main": "module.js"
3+
}

project/package/nuxt/plugin.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Vue from 'vue'
2+
import CodeEditor from "simple-code-editor";
3+
Vue.component('CodeEditor', CodeEditor);

0 commit comments

Comments
 (0)