You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The content of this directory is the Hugo content source of code-input-js.org. Most code in curly braces {} is relied on by the website setup.
3
+
The content of this directory is the Hugo content source of [code-input-js.org](code-input-js.org). Most code in curly braces {} is relied on by the website setup.
4
4
5
-
The homepage can be found at <_index.md>.
5
+
The homepage can be found at [_index.md](_index.md).
Copy file name to clipboardExpand all lines: docs/frameworks/hljs/nuxt/_index.md
+68-36Lines changed: 68 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,16 +4,19 @@ title = 'How to use code-input and highlight.js with Nuxt'
4
4
5
5
# How to use code-input and highlight.js with Nuxt
6
6
7
-
> Contributors: 2025 Paul Rosen
7
+
> Contributors: 2025 Paul Rosen, 2025 Oliver Geer; **code samples licensed [MIT/Expat](https://spdx.org/licenses/MIT)**
8
8
9
-
<ahref="../vue">Vue</a> and Nuxt have some similarities, but there is one big difference in how they can use this library. In Nuxt there is server side rendering (SSR) that will attempt to create the final HTML before sending the page to the browser. This cannot use any browser-specific things so the `code-input` component must be excluded from rendering until hydration in the browser.
9
+
[Vue](../vue) and Nuxt have some similarities, but there is one big difference in how they can use this library. In Nuxt there is server side rendering (SSR) that will attempt to create the final HTML before sending the page to the browser. This cannot use any browser-specific things so the `code-input` component must be excluded from rendering until hydration in the browser.
10
10
11
11
## 1. Create a Nuxt app
12
12
13
-
First, create a Nuxt project. (If you already have a Nuxt project then you can skip this step). On a command line, type this:
13
+
First, create a Nuxt project. (If you already have a Nuxt project then you can skip this step). On a command line, use your package manager to do so, for example by typing one of these:
14
14
```bash
15
+
yarn create nuxt syntax-highlighter
16
+
# OR
15
17
npm create nuxt@latest syntax-highlighter
16
18
```
19
+
17
20
At the time this tutorial was created, the output was the following:
18
21
```plaintext
19
22
Need to install the following packages:
@@ -72,22 +75,33 @@ none
72
75
And just like the above instructions mention, do the following:
73
76
```bash
74
77
cd syntax-highlighter
78
+
79
+
yarn run dev
80
+
# OR
75
81
npm run dev
82
+
# or your package manager's equivalent command
76
83
```
77
84
78
-
You should be able to open your browser to the path that it prints out and see a working Nuxt app. If so, congratulations! Hit Ctrl-C to stop it.
85
+
You should be able to open your browser to the path that it prints out and see a working Nuxt app. If so, congratulations! Hit Ctrl-C in the command line to stop it.
79
86
80
87
## 2. Add dependencies
81
88
82
89
> This tutorial will use `highlight.js` for the syntax highlighting. If you are using a different method then adjust as needed.
83
90
84
-
Type this:
91
+
Type these 2 commands:
85
92
```bash
93
+
yarn add @webcoder49/code-input
94
+
# OR
86
95
npm install @webcoder49/code-input
96
+
# or your package manager's equivalent command
97
+
98
+
yarn add highlight.js
99
+
# OR
87
100
npm install highlight.js
101
+
# or your package manager's equivalent command
88
102
```
89
103
90
-
In the file `vite.config.ts`, after the line `compatibilityDate`, add this so that Vue knows that `code-input` is not a Vue component:
104
+
In the file `nuxt.config.ts`, after the line `compatibilityDate`, add this so that Vue knows that `code-input` is not a Vue component:
91
105
92
106
```javascript
93
107
vue: {
@@ -108,41 +122,53 @@ So that the necessary css is loaded for code-input, and an example theme is load
108
122
109
123
## 3. Initialize the textarea
110
124
111
-
Create a component with whatever name you want. Perhaps `app/components/RichEditor.vue`. Paste the following into it:
125
+
Create a component with whatever name you want. Perhaps `app/components/CodeEditor.vue`. Paste the following into it:
112
126
113
127
```html
114
128
<template>
115
-
<divclass="rich-editor">
116
-
<!-- Use ClientOnly so that no SSR is done on the code-input component -->
117
-
<ClientOnly>
118
-
<code-input
119
-
ref="elem"
120
-
:name="name"
121
-
:value="value"
122
-
spellcheck="false"
123
-
@input="emit('input', $event.target.value)"
124
-
@code-input_load="loaded"
125
-
></code-input>
126
-
</ClientOnly>
127
-
</div>
129
+
<!--Attributes that make sense on a
130
+
textarea element are both on the code-
131
+
input element for when full
132
+
functionality is present, and on the
133
+
fallback textarea for when it's not
134
+
(e.g. bug or outdated browser).-->
135
+
<code-input
136
+
ref="elem"
137
+
template="code-editor"
138
+
:name="name"
139
+
:value="value"
140
+
:language="language"
141
+
@input="emit('input', elem.value)"
142
+
@code-input_load="loaded"
143
+
>
144
+
<textarea
145
+
:name="name"
146
+
:value="value"
147
+
@input="emit('input', elem.value)"
148
+
data-code-input-fallback
149
+
></textarea>
150
+
</code-input>
128
151
</template>
129
152
130
153
<scriptlang="ts"setup>
131
154
// For loading a highlighting engine - this example uses highlight.js
132
155
importhljsfrom'highlight.js/lib/core';
156
+
// You can import and register (in onBeforeMount below) whichever languages you will use,
157
+
// or if you will use many import all, following the instructions at https://highlightjs.org/#usage.
0 commit comments