├── .editorconfig ├── .github ├── ISSUE_TEMPLATE │ ├── bug-report.yml │ └── feature-request.yml └── workflows │ └── ci.yml ├── .gitignore ├── .npmrc ├── .vscode ├── extensions.json ├── launch.json ├── settings.json └── snippets.code-snippets ├── CHANGELOG.md ├── Dockerfile ├── LICENSE ├── README.md ├── client ├── .nuxtrc ├── app.vue ├── components │ ├── DevtoolsPane.vue │ └── ModuleAuthorNote.vue ├── global.d.ts ├── nuxt.config.ts ├── package.json ├── pages │ └── index.vue └── utils │ └── index.ts ├── docs ├── .editorconfig ├── .env.example ├── .github │ └── workflows │ │ └── ci.yml ├── .gitignore ├── .npmrc ├── README.md ├── app │ ├── app.config.ts │ ├── app.vue │ ├── assets │ │ └── css │ │ │ └── main.css │ ├── components │ │ ├── AppFooter.vue │ │ ├── AppHeader.vue │ │ ├── LogoPro.vue │ │ ├── OgImage │ │ │ └── OgImageDocs.vue │ │ └── TemplateMenu.vue │ ├── error.vue │ ├── layouts │ │ └── docs.vue │ └── pages │ │ ├── [...slug].vue │ │ └── index.vue ├── content.config.ts ├── content │ ├── 1.getting-started │ │ ├── .navigation.yml │ │ ├── 1.index.md │ │ ├── 2.installation.md │ │ └── 3.usage.md │ ├── 2.essentials │ │ ├── .navigation.yml │ │ ├── 1.markdown-syntax.md │ │ ├── 2.code-blocks.md │ │ ├── 3.prose-components.md │ │ └── 4.images-embeds.md │ └── index.md ├── eslint.config.mjs ├── nuxt.config.ts ├── nuxt.schema.ts ├── package.json ├── pnpm-lock.yaml ├── public │ ├── favicon.ico │ └── social-card.png ├── renovate.json └── tsconfig.json ├── eslint.config.mjs ├── package.json ├── playground ├── .npmrc ├── app.vue ├── nuxt.config.ts ├── package.json ├── pnpm-lock.yaml ├── server │ └── tsconfig.json └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── renovate.json ├── src ├── devtools.ts ├── module.ts └── runtime │ ├── components │ └── NuxtCodeMirror.vue │ ├── composables │ └── useNuxtCodeMirror.ts │ ├── getDefaultExtensions.ts │ ├── theme │ └── light.ts │ ├── types │ └── nuxt-codemirror.d.ts │ └── utils │ └── utils.ts ├── test ├── basic.test.ts └── fixtures │ └── basic │ ├── app.vue │ ├── nuxt.config.ts │ └── package.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.yml: -------------------------------------------------------------------------------- 1 | name: "\U0001F41E Bug report" 2 | description: Create a report to help us improve Nuxt-CodeMirror 3 | labels: ["pending triage"] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Please carefully read the contribution docs before creating a bug report 9 | 👉 https://nuxt.com/docs/community/reporting-bugs 10 | 11 | Please use a template below to create a minimal reproduction 12 | 👉 https://stackblitz.com/github/nuxt/starter/tree/v3 13 | 👉 https://codesandbox.io/s/github/nuxt/starter/tree/v3 14 | - type: textarea 15 | id: bug-env 16 | attributes: 17 | label: Environment 18 | description: You can use `npx nuxi info` to fill this section 19 | placeholder: Environment 20 | validations: 21 | required: true 22 | - type: textarea 23 | id: reproduction 24 | attributes: 25 | label: Reproduction 26 | description: Please provide a link to a repo that can reproduce the problem you ran into. A [**minimal reproduction**](https://nuxt.com/docs/community/reporting-bugs#create-a-minimal-reproduction) is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided we might close it. 27 | placeholder: Reproduction 28 | validations: 29 | required: true 30 | - type: textarea 31 | id: bug-description 32 | attributes: 33 | label: Describe the bug 34 | description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks! 35 | placeholder: Bug description 36 | validations: 37 | required: true 38 | - type: textarea 39 | id: additonal 40 | attributes: 41 | label: Additional context 42 | description: If applicable, add any other context about the problem here 43 | - type: textarea 44 | id: logs 45 | attributes: 46 | label: Logs 47 | description: | 48 | Optional if provided reproduction. Please try not to insert an image but copy paste the log text. 49 | render: shell-script 50 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.yml: -------------------------------------------------------------------------------- 1 | name: "🚀 Feature request" 2 | description: Suggest a feature that will improve Nuxt 3 | labels: ["pending triage"] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Thank you for taking the time to fill out this feature request! 9 | 10 | Please carefully read the contribution docs before suggesting a new feature 11 | 👉 https://nuxt.com/docs/community/contribution/#creating-an-issue 12 | - type: textarea 13 | id: feature-description 14 | attributes: 15 | label: Describe the feature 16 | description: A clear and concise description of what you think would be a helpful addition to Nuxt, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link. 17 | placeholder: Feature description 18 | validations: 19 | required: true 20 | - type: checkboxes 21 | id: additional-info 22 | attributes: 23 | label: Additional information 24 | description: Additional information that helps us decide how to proceed. 25 | options: 26 | - label: Would you be willing to help implement this feature? 27 | - type: checkboxes 28 | id: required-info 29 | attributes: 30 | label: Final checks 31 | description: Before submitting, please make sure you do the following 32 | options: 33 | - label: Read the [contribution guide](https://nuxt.com/docs/community/contribution). 34 | required: true 35 | - label: Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues). 36 | required: true 37 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | 11 | jobs: 12 | lint: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v4 17 | - run: corepack enable 18 | - uses: actions/setup-node@v4 19 | with: 20 | node-version: 20 21 | 22 | - name: Install dependencies 23 | run: npx nypm@latest i 24 | 25 | - name: Lint 26 | run: npm run lint 27 | 28 | test: 29 | runs-on: ubuntu-latest 30 | 31 | steps: 32 | - uses: actions/checkout@v4 33 | - run: corepack enable 34 | - uses: actions/setup-node@v4 35 | with: 36 | node-version: 20 37 | 38 | - name: Install dependencies 39 | run: npx nypm@latest i 40 | 41 | - name: Playground prepare 42 | run: npm run dev:prepare 43 | 44 | - name: Test 45 | run: npm run test 46 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Logs 5 | *.log* 6 | 7 | # Temp directories 8 | .temp 9 | .tmp 10 | .cache 11 | 12 | # Yarn 13 | **/.yarn/cache 14 | **/.yarn/*state* 15 | 16 | # Generated dirs 17 | dist 18 | 19 | # Nuxt 20 | .nuxt 21 | .output 22 | .data 23 | .vercel_build_output 24 | .build-* 25 | .netlify 26 | 27 | # Env 28 | .env 29 | 30 | # Testing 31 | reports 32 | coverage 33 | *.lcov 34 | .nyc_output 35 | 36 | # VSCode 37 | .vscode/* 38 | !.vscode/settings.json 39 | !.vscode/tasks.json 40 | !.vscode/launch.json 41 | !.vscode/extensions.json 42 | !.vscode/*.code-snippets 43 | 44 | # Intellij idea 45 | *.iml 46 | .idea 47 | 48 | # OSX 49 | .DS_Store 50 | .AppleDouble 51 | .LSOverride 52 | .AppleDB 53 | .AppleDesktop 54 | Network Trash Folder 55 | Temporary Items 56 | .apdisk 57 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "antfu.goto-alias", 5 | "antfu.where-am-i", 6 | "mikestead.dotenv", 7 | "bradlc.vscode-tailwindcss", 8 | "pkief.material-icon-theme", 9 | "johnsoncodehk.vscode-tsconfig-helper", 10 | "christian-kohler.path-intellisense", 11 | "usernamehw.errorlens", 12 | "yoavbls.pretty-ts-errors", 13 | "antfu.iconify", 14 | "antfu.open-in-github-button", 15 | "meganrogge.template-string-converter" 16 | ], 17 | "unwantedRecommendations": [ 18 | "esbenp.prettier-vscode" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | "version": "0.2.0", 5 | "configurations": [ 6 | { 7 | "sourceMaps": true, 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "client: chrome", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceFolder}", 13 | }, 14 | { 15 | "type": "node", 16 | "request": "launch", 17 | "name": "server: nuxt", 18 | "outputCapture": "std", 19 | "program": "${workspaceFolder}/playground/node_modules/nuxi/bin/nuxi.mjs", 20 | "args": [ 21 | "dev" 22 | ] 23 | } 24 | ], 25 | "compounds": [ 26 | { 27 | "name": "fullstack: nuxt", 28 | "configurations": [ 29 | "server: nuxt", 30 | "client: chrome" 31 | ] 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // I only use Prettier for manually formatting 3 | "prettier.enable": false, 4 | "prettier.printWidth": 200, 5 | "prettier.semi": false, 6 | "prettier.singleQuote": true, 7 | 8 | // ========== Visuals ========== 9 | "editor.guides.bracketPairs": "active", 10 | "editor.lineNumbers": "on", 11 | "window.autoDetectColorScheme": true, 12 | "workbench.editor.tabActionLocation": "right", 13 | "workbench.list.smoothScrolling": true, 14 | "workbench.preferredDarkColorTheme": "Default Dark+", 15 | "workbench.preferredLightColorTheme": "Default Dark+", 16 | "workbench.productIconTheme": "Default", 17 | "workbench.sideBar.location": "left", 18 | "workbench.activityBar.orientation": "vertical", 19 | "workbench.startupEditor": "newUntitledFile", 20 | "workbench.tree.expandMode": "singleClick", 21 | "workbench.tree.indent": 25, 22 | 23 | // ========== Editor ========== 24 | "debug.onTaskErrors": "debugAnyway", 25 | "diffEditor.ignoreTrimWhitespace": false, 26 | "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?", 27 | "editor.find.addExtraSpaceOnTop": false, 28 | "editor.inlineSuggest.enabled": true, 29 | "editor.multiCursorModifier": "ctrlCmd", 30 | "editor.tabSize": 2, 31 | "editor.unicodeHighlight.invisibleCharacters": false, 32 | "editor.hover.sticky": true, 33 | "explorer.confirmDelete": false, 34 | "explorer.confirmDragAndDrop": false, 35 | "files.eol": "\n", 36 | "files.simpleDialog.enable": true, 37 | "git.autofetch": true, 38 | "git.confirmSync": false, 39 | "git.enableSmartCommit": true, 40 | "git.untrackedChanges": "separate", 41 | "scm.diffDecorationsGutterWidth": 2, 42 | "terminal.integrated.cursorBlinking": true, 43 | "terminal.integrated.cursorStyle": "line", 44 | "terminal.integrated.fontWeight": "300", 45 | "terminal.integrated.persistentSessionReviveProcess": "never", 46 | "terminal.integrated.tabs.enabled": true, 47 | "workbench.editor.limit.enabled": true, 48 | "workbench.editor.limit.perEditorGroup": true, 49 | "workbench.editor.limit.value": 5, 50 | "search.exclude": { 51 | "**/*.snap": true, 52 | "**/*.svg": true, 53 | "**/.git": true, 54 | "**/.github": false, 55 | "**/.nuxt": true, 56 | "**/.output": true, 57 | "**/.pnpm": true, 58 | "**/.vscode": true, 59 | "**/.yarn": true, 60 | "**/assets": true, 61 | "**/bower_components": true, 62 | "**/dist/**": true, 63 | "**/logs": true, 64 | "**/node_modules": true, 65 | "**/out/**": true, 66 | "**/package-lock.json": true, 67 | "**/pnpm-lock.yaml": true, 68 | "**/public": true, 69 | "**/temp": true, 70 | "**/yarn.lock": true, 71 | "**/CHANGELOG*": true, 72 | "**/LICENSE*": true 73 | }, 74 | 75 | "window.title": "${rootName}", // this make tabs more readable 76 | 77 | // ========== Extension configs ========== 78 | "emmet.showSuggestionsAsSnippets": true, 79 | "emmet.triggerExpansionOnTab": false, 80 | "errorLens.enabledDiagnosticLevels": [ 81 | "warning", 82 | "error" 83 | ], 84 | "errorLens.excludeBySource": [ 85 | "cSpell", 86 | "Grammarly", 87 | "eslint" 88 | ], 89 | 90 | // ESLint config: https://github.com/antfu/eslint-config 91 | "eslint.codeAction.showDocumentation": { 92 | "enable": true 93 | }, 94 | "eslint.quiet": true, 95 | 96 | "css.lint.hexColorLength": "ignore", 97 | "iconify.annotations": true, 98 | "iconify.inplace": true, 99 | 100 | // Github Copilot settings 101 | "github.copilot.enable": { 102 | "*": true, 103 | "yaml": false, 104 | "plaintext": false, 105 | "markdown": false, 106 | "env": false 107 | }, 108 | 109 | // Editor settings DX 110 | "editor.wordWrap": "on", 111 | "editor.snippetSuggestions": "top", 112 | "editor.suggestSelection": "first", 113 | "editor.renderWhitespace": "selection", 114 | "editor.smoothScrolling": true, 115 | "editor.stickyScroll.enabled": true, 116 | "editor.suggest.preview": true, 117 | "editor.suggest.showStatusBar": true, 118 | "editor.cursorBlinking": "phase", 119 | "editor.autoClosingBrackets": "always", 120 | "editor.autoClosingQuotes": "always", 121 | "editor.autoClosingOvertype": "always", 122 | "editor.autoClosingDelete": "always", 123 | "editor.autoIndent": "full", 124 | "editor.formatOnPaste": true, 125 | 126 | "editor.foldingImportsByDefault": true, 127 | "editor.codeActionsOnSave": { 128 | "eslint.format.enable": "always", 129 | "addMissingImports": "always", 130 | "source.fixAll.eslint": "explicit", 131 | "source.organizeImports": "never" 132 | }, 133 | // Getting used to this one, don't know if I like it yet 134 | "editor.cursorSmoothCaretAnimation": "on", 135 | "files.insertFinalNewline": true, 136 | "files.trimTrailingWhitespace": true, 137 | // Minimap settings 138 | "editor.minimap.enabled": true, 139 | "editor.minimap.renderCharacters": false, 140 | "editor.minimap.maxColumn": 200, 141 | "editor.minimap.showSlider": "always", 142 | "editor.defaultFormatter": "dbaeumer.vscode-eslint", 143 | // Breadcrumbs settings 144 | "breadcrumbs.enabled": true, 145 | "breadcrumbs.filePath": "on", 146 | "breadcrumbs.symbolPath": "on", 147 | // Typescript and javascript settings 148 | "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true, 149 | "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true, 150 | "javascript.preferences.importModuleSpecifier": "non-relative", 151 | "typescript.preferences.importModuleSpecifier": "non-relative", 152 | "javascript.updateImportsOnFileMove.enabled": "always", 153 | "typescript.updateImportsOnFileMove.enabled": "always", 154 | "files.autoSave": "afterDelay", 155 | "files.autoSaveDelay": 750, 156 | // Workbench settings 157 | "workbench.editor.enablePreview": true, 158 | "workbench.editor.closeOnFileDelete": true, 159 | "workbench.editor.highlightModifiedTabs": true, 160 | // Tailwind CSS 161 | "tailwindCSS.emmetCompletions": true, 162 | "tailwindCSS.validate": true, 163 | "tailwindCSS.suggestions": true, 164 | "tailwindCSS.hovers": true, 165 | // Enable the ESlint flat config support 166 | "eslint.useFlatConfig": true, 167 | 168 | // Disable the default formatter, use eslint instead 169 | "editor.formatOnSave": false, 170 | 171 | // Silent the stylistic rules in you IDE, but still auto fix them 172 | "eslint.rules.customizations": [ 173 | { "rule": "style/*", "severity": "off" }, 174 | { "rule": "format/*", "severity": "off" }, 175 | { "rule": "*-indent", "severity": "off" }, 176 | { "rule": "*-spacing", "severity": "off" }, 177 | { "rule": "*-spaces", "severity": "off" }, 178 | { "rule": "*-order", "severity": "off" }, 179 | { "rule": "*-dangle", "severity": "off" }, 180 | { "rule": "*-newline", "severity": "off" }, 181 | { "rule": "*quotes", "severity": "off" }, 182 | { "rule": "*semi", "severity": "off" } 183 | ], 184 | 185 | // Enable eslint for all supported languages 186 | "eslint.validate": [ 187 | "javascript", 188 | "javascriptreact", 189 | "typescript", 190 | "typescriptreact", 191 | "vue", 192 | "html", 193 | "markdown", 194 | "json", 195 | "jsonc", 196 | "yaml", 197 | "toml" 198 | ], 199 | // Auto-complete `.value` attribute when VUe language extension is installed 200 | "vue.autoInsert.dotValue": true, 201 | 202 | // File nesting settings 203 | // updated 2024-03-15 16:07 204 | // https://github.com/antfu/vscode-file-nesting-config 205 | "explorer.fileNesting.enabled": true, 206 | "explorer.fileNesting.expand": false, 207 | "explorer.fileNesting.patterns": { 208 | "*.asax": "$(capture).*.cs, $(capture).*.vb", 209 | "*.ascx": "$(capture).*.cs, $(capture).*.vb", 210 | "*.ashx": "$(capture).*.cs, $(capture).*.vb", 211 | "*.aspx": "$(capture).*.cs, $(capture).*.vb", 212 | "*.axaml": "$(capture).axaml.cs", 213 | "*.bloc.dart": "$(capture).event.dart, $(capture).state.dart", 214 | "*.c": "$(capture).h", 215 | "*.cc": "$(capture).hpp, $(capture).h, $(capture).hxx", 216 | "*.cjs": "$(capture).cjs.map, $(capture).*.cjs, $(capture)_*.cjs", 217 | "*.component.ts": "$(capture).component.html, $(capture).component.spec.ts, $(capture).component.css, $(capture).component.scss, $(capture).component.sass, $(capture).component.less", 218 | "*.cpp": "$(capture).hpp, $(capture).h, $(capture).hxx", 219 | "*.cs": "$(capture).*.cs", 220 | "*.cshtml": "$(capture).cshtml.cs", 221 | "*.csproj": "*.config, *proj.user, appsettings.*, bundleconfig.json", 222 | "*.css": "$(capture).css.map, $(capture).*.css", 223 | "*.cxx": "$(capture).hpp, $(capture).h, $(capture).hxx", 224 | "*.dart": "$(capture).freezed.dart, $(capture).g.dart", 225 | "*.ex": "$(capture).html.eex, $(capture).html.heex, $(capture).html.leex", 226 | "*.fs": "$(capture).fs.js, $(capture).fs.js.map, $(capture).fs.jsx, $(capture).fs.ts, $(capture).fs.tsx, $(capture).fs.rs, $(capture).fs.php, $(capture).fs.dart", 227 | "*.go": "$(capture)_test.go", 228 | "*.java": "$(capture).class", 229 | "*.js": "$(capture).js.map, $(capture).*.js, $(capture)_*.js", 230 | "*.jsx": "$(capture).js, $(capture).*.jsx, $(capture)_*.js, $(capture)_*.jsx, $(capture).less, $(capture).module.less", 231 | "*.master": "$(capture).*.cs, $(capture).*.vb", 232 | "*.mjs": "$(capture).mjs.map, $(capture).*.mjs, $(capture)_*.mjs", 233 | "*.module.ts": "$(capture).resolver.ts, $(capture).controller.ts, $(capture).service.ts", 234 | "*.mts": "$(capture).mts.map, $(capture).*.mts, $(capture)_*.mts", 235 | "*.pubxml": "$(capture).pubxml.user", 236 | "*.razor": "$(capture).razor.cs, $(capture).razor.css, $(capture).razor.scss", 237 | "*.resx": "$(capture).*.resx, $(capture).designer.cs, $(capture).designer.vb", 238 | "*.tex": "$(capture).acn, $(capture).acr, $(capture).alg, $(capture).aux, $(capture).bbl, $(capture).blg, $(capture).fdb_latexmk, $(capture).fls, $(capture).glg, $(capture).glo, $(capture).gls, $(capture).idx, $(capture).ind, $(capture).ist, $(capture).lof, $(capture).log, $(capture).lot, $(capture).out, $(capture).pdf, $(capture).synctex.gz, $(capture).toc, $(capture).xdv", 239 | "*.ts": "$(capture).js, $(capture).d.ts.map, $(capture).*.ts, $(capture)_*.js, $(capture)_*.ts", 240 | "*.tsx": "$(capture).ts, $(capture).*.tsx, $(capture)_*.ts, $(capture)_*.tsx, $(capture).less, $(capture).module.less, $(capture).scss, $(capture).module.scss", 241 | "*.vbproj": "*.config, *proj.user, appsettings.*, bundleconfig.json", 242 | "*.vue": "$(capture).*.ts, $(capture).*.js, $(capture).story.vue", 243 | "*.xaml": "$(capture).xaml.cs", 244 | "+layout.svelte": "+layout.ts,+layout.ts,+layout.js,+layout.server.ts,+layout.server.js,+layout.gql", 245 | "+page.svelte": "+page.server.ts,+page.server.js,+page.ts,+page.js,+page.gql", 246 | ".clang-tidy": ".clang-format, .clangd, compile_commands.json", 247 | ".env": "*.env, .env.*, .envrc, env.d.ts", 248 | ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*", 249 | ".project": ".classpath", 250 | "BUILD.bazel": "*.bzl, *.bazel, *.bazelrc, bazel.rc, .bazelignore, .bazelproject, WORKSPACE", 251 | "CMakeLists.txt": "*.cmake, *.cmake.in, .cmake-format.yaml, CMakePresets.json, CMakeCache.txt", 252 | "Cargo.toml": ".clippy.toml, .rustfmt.toml, cargo.lock, clippy.toml, cross.toml, rust-toolchain.toml, rustfmt.toml", 253 | "Dockerfile": "*.dockerfile, .devcontainer.*, .dockerignore, compose.*, docker-compose.*, dockerfile*", 254 | "I*.cs": "$(capture).cs", 255 | "Makefile": "*.mk", 256 | "Pipfile": ".editorconfig, .flake8, .isort.cfg, .python-version, Pipfile, Pipfile.lock, requirements*.in, requirements*.pip, requirements*.txt, tox.ini", 257 | "README*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README*, Readme*, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors*", 258 | "Readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README*, Readme*, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors*", 259 | "artisan": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, server.php, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, webpack.mix.js, windi.config.*", 260 | "astro.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, windi.config.*", 261 | "composer.json": ".php*.cache, composer.lock, phpunit.xml*, psalm*.xml", 262 | "default.nix": "shell.nix", 263 | "deno.json*": "*.env, .env.*, .envrc, api-extractor.json, deno.lock, env.d.ts, import-map.json, import_map.json, jsconfig.*, tsconfig.*, tsdoc.*", 264 | "flake.nix": "flake.lock", 265 | "gatsby-config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, gatsby-browser.*, gatsby-node.*, gatsby-ssr.*, gatsby-transformer.*, histoire.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, windi.config.*", 266 | "gemfile": ".ruby-version, gemfile.lock", 267 | "go.mod": ".air*, go.sum", 268 | "go.work": "go.work.sum", 269 | "hatch.toml": ".editorconfig, .flake8, .isort.cfg, .python-version, hatch.toml, requirements*.in, requirements*.pip, requirements*.txt, tox.ini", 270 | "mix.exs": ".credo.exs, .dialyzer_ignore.exs, .formatter.exs, .iex.exs, .tool-versions, mix.lock", 271 | "next.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, next-env.d.ts, next-i18next.config.*, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, windi.config.*", 272 | "nuxt.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .nuxtignore, .nuxtrc, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, windi.config.*", 273 | "package.json": ".browserslist*, .circleci*, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json*, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitmojirc.json, .gitpod*, .huskyrc*, .jslint*, .knip.*, .lintstagedrc*, .markdownlint*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .release-please*.json, .releaserc*, .sentry*, .simple-git-hooks*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, apollo.config.*, appveyor*, azure-pipelines*, biome.json, bower.json, build.config.*, bun.lockb, commitlint*, crowdin*, dangerfile*, dlint.json, dprint.json*, electron-builder.*, eslint*, firebase.json, grunt*, gulp*, jenkins*, knip.*, lerna*, lint-staged*, nest-cli.*, netlify*, nodemon*, npm-shrinkwrap.json, nx.*, package-lock.json, package.nls*.json, phpcs.xml, pm2.*, pnpm*, prettier*, pullapprove*, pyrightconfig.json, release-please*.json, release-tasks.sh, release.config.*, renovate*, rollup.config.*, rspack*, simple-git-hooks*, sonar-project.properties, stylelint*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, webpack*, workspace.json, xo.config.*, yarn*", 274 | "pubspec.yaml": ".metadata, .packages, all_lint_rules.yaml, analysis_options.yaml, build.yaml, pubspec.lock, pubspec_overrides.yaml", 275 | "pyproject.toml": ".editorconfig, .flake8, .isort.cfg, .pdm-python, .pdm.toml, .python-version, MANIFEST.in, Pipfile, Pipfile.lock, hatch.toml, pdm.lock, poetry.lock, pyproject.toml, requirements*.in, requirements*.pip, requirements*.txt, setup.cfg, setup.py, tox.ini", 276 | "quasar.conf.js": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, quasar.extensions.json, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, windi.config.*", 277 | "readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README*, Readme*, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors*", 278 | "remix.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, remix.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, windi.config.*", 279 | "requirements.txt": ".editorconfig, .flake8, .isort.cfg, .python-version, requirements*.in, requirements*.pip, requirements*.txt, tox.ini", 280 | "rush.json": ".browserslist*, .circleci*, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json*, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitmojirc.json, .gitpod*, .huskyrc*, .jslint*, .knip.*, .lintstagedrc*, .markdownlint*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .release-please*.json, .releaserc*, .sentry*, .simple-git-hooks*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, apollo.config.*, appveyor*, azure-pipelines*, biome.json, bower.json, build.config.*, bun.lockb, commitlint*, crowdin*, dangerfile*, dlint.json, dprint.json*, electron-builder.*, eslint*, firebase.json, grunt*, gulp*, jenkins*, knip.*, lerna*, lint-staged*, nest-cli.*, netlify*, nodemon*, npm-shrinkwrap.json, nx.*, package-lock.json, package.nls*.json, phpcs.xml, pm2.*, pnpm*, prettier*, pullapprove*, pyrightconfig.json, release-please*.json, release-tasks.sh, release.config.*, renovate*, rollup.config.*, rspack*, simple-git-hooks*, sonar-project.properties, stylelint*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, webpack*, workspace.json, xo.config.*, yarn*", 281 | "setup.cfg": ".editorconfig, .flake8, .isort.cfg, .python-version, MANIFEST.in, requirements*.in, requirements*.pip, requirements*.txt, setup.cfg, tox.ini", 282 | "setup.py": ".editorconfig, .flake8, .isort.cfg, .python-version, MANIFEST.in, requirements*.in, requirements*.pip, requirements*.txt, setup.cfg, setup.py, tox.ini", 283 | "shims.d.ts": "*.d.ts", 284 | "svelte.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, houdini.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, mdsvex.config.js, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vite.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, windi.config.*", 285 | "vite.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, windi.config.*", 286 | "vue.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, capacitor.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, i18n.config.*, ionic.config.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, panda.config.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, vuetify.config.*, webpack.config.*, windi.config.*" 287 | }, 288 | "workbench.colorTheme": "Default Dark+", 289 | "typescript.tsdk": "node_modules\\typescript\\lib" 290 | } 291 | -------------------------------------------------------------------------------- /.vscode/snippets.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "console.log": { 3 | "prefix": "cl", 4 | "body": [ 5 | "console.log($1);" 6 | ], 7 | "description": "Log output to console" 8 | }, 9 | "import": { 10 | "scope": "javascript,typescript", 11 | "prefix": "im", 12 | "body": [ 13 | "import { $1 } from '$2';" 14 | ], 15 | "description": "Import a module" 16 | }, 17 | "export-all": { 18 | "scope": "javascript,typescript", 19 | "prefix": "ex", 20 | "body": [ 21 | "export * from '$2';" 22 | ], 23 | "description": "Export a module" 24 | }, 25 | "vue-script-setup": { 26 | "scope": "vue", 27 | "prefix": "", 30 | "const props = defineProps<{", 31 | " modelValue?: boolean,", 32 | "}>()", 33 | "$1", 34 | "", 35 | "", 36 | "", 41 | ] 42 | }, 43 | "vue-template-ref": { 44 | "scope": "javascript,typescript,vue", 45 | "prefix": "tref", 46 | "body": [ 47 | "const ${1:el} = shallowRef()", 48 | ] 49 | }, 50 | "vue-computed": { 51 | "scope": "javascript,typescript,vue", 52 | "prefix": "com", 53 | "body": [ 54 | "computed(() => { $1 })" 55 | ] 56 | }, 57 | "vue-watch-effect": { 58 | "scope": "javascript,typescript,vue", 59 | "prefix": "watchE", 60 | "body": [ 61 | "watchEffect(() => {", 62 | " $1", 63 | "})" 64 | ] 65 | }, 66 | } 67 | // https://code.visualstudio.com/docs/editor/userdefinedsnippets 68 | // Create a file in your .vscode folder named: snippets.code-snippets 69 | // This is an example for a clean Vue 3 component 70 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | 4 | ## v0.0.16 5 | 6 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.15...v0.0.16) 7 | 8 | ### 🩹 Fixes 9 | 10 | - Set explicit default extensions for bool basic setup ([f3aa716](https://github.com/ThimoDEV/nuxt-codemirror/commit/f3aa716)) 11 | 12 | ### ❤️ Contributors 13 | 14 | - Thimo ([@ThimoDEV](https://github.com/ThimoDEV)) 15 | 16 | ## v0.0.15 17 | 18 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.14...v0.0.15) 19 | 20 | ### 🚀 Enhancements 21 | 22 | - Inline nuxt docs v3 & dockerfile ([0e85bf0](https://github.com/ThimoDEV/nuxt-codemirror/commit/0e85bf0)) 23 | - Added codemirror devtool tab and updated module.ts ([bb123a4](https://github.com/ThimoDEV/nuxt-codemirror/commit/bb123a4)) 24 | 25 | ### 🩹 Fixes 26 | 27 | - **deps:** Update dependency @codemirror/language to v6.11.0 ([3c18a51](https://github.com/ThimoDEV/nuxt-codemirror/commit/3c18a51)) 28 | - Added minimalSetup example to playground ([cdd59c1](https://github.com/ThimoDEV/nuxt-codemirror/commit/cdd59c1)) 29 | - Nuxt 3.16 specific changes and workspace for module and playground ([258883a](https://github.com/ThimoDEV/nuxt-codemirror/commit/258883a)) 30 | 31 | ### 🏡 Chore 32 | 33 | - Edited playground to test highlighting ([f035697](https://github.com/ThimoDEV/nuxt-codemirror/commit/f035697)) 34 | - Cleanup playground and module ([2508806](https://github.com/ThimoDEV/nuxt-codemirror/commit/2508806)) 35 | - Remove unused packages ([b4e5ed5](https://github.com/ThimoDEV/nuxt-codemirror/commit/b4e5ed5)) 36 | - Type issue ([7febf14](https://github.com/ThimoDEV/nuxt-codemirror/commit/7febf14)) 37 | - Update lockfile ([a90e821](https://github.com/ThimoDEV/nuxt-codemirror/commit/a90e821)) 38 | - Fix lint and build errors ([5cc392b](https://github.com/ThimoDEV/nuxt-codemirror/commit/5cc392b)) 39 | - Disable devtools ([30819d6](https://github.com/ThimoDEV/nuxt-codemirror/commit/30819d6)) 40 | 41 | ### ❤️ Contributors 42 | 43 | - Thimo ([@ThimoDEV](https://github.com/ThimoDEV)) 44 | - H+ ([@justserdar](https://github.com/justserdar)) 45 | 46 | ## v0.0.14 47 | 48 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.13...v0.0.14) 49 | 50 | ## v0.0.13 51 | 52 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.12...v0.0.13) 53 | 54 | ### 🩹 Fixes 55 | 56 | - **deps:** Update codemirror ([3e4e70c](https://github.com/ThimoDEV/nuxt-codemirror/commit/3e4e70c)) 57 | - **deps:** Update dependency @babel/runtime to v7.26.10 ([3348125](https://github.com/ThimoDEV/nuxt-codemirror/commit/3348125)) 58 | - Seems highlighting works now ([7d5deb0](https://github.com/ThimoDEV/nuxt-codemirror/commit/7d5deb0)) 59 | 60 | ### 🏡 Chore 61 | 62 | - Updated playground packages ([4917b9b](https://github.com/ThimoDEV/nuxt-codemirror/commit/4917b9b)) 63 | - Update packages and playground ([7286703](https://github.com/ThimoDEV/nuxt-codemirror/commit/7286703)) 64 | - Cleanup unused imports ([5c43151](https://github.com/ThimoDEV/nuxt-codemirror/commit/5c43151)) 65 | 66 | ### ❤️ Contributors 67 | 68 | - Thimo ([@ThimoDEV](https://github.com/ThimoDEV)) 69 | 70 | ## v0.0.12 71 | 72 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.11...v0.0.12) 73 | 74 | ### 🩹 Fixes 75 | 76 | - **deps:** Update dependency @codemirror/view to v6.32.0 ([756b89e](https://github.com/ThimoDEV/nuxt-codemirror/commit/756b89e)) 77 | - **deps:** Update dependency @babel/runtime to v7.25.4 ([9ce4bf2](https://github.com/ThimoDEV/nuxt-codemirror/commit/9ce4bf2)) 78 | - **deps:** Update nuxtjs monorepo to v3.13.0 ([df6f75b](https://github.com/ThimoDEV/nuxt-codemirror/commit/df6f75b)) 79 | - **deps:** Update dependency @codemirror/view to v6.33.0 ([3a1c90d](https://github.com/ThimoDEV/nuxt-codemirror/commit/3a1c90d)) 80 | - **deps:** Update dependency @babel/runtime to v7.25.6 ([af05cc3](https://github.com/ThimoDEV/nuxt-codemirror/commit/af05cc3)) 81 | - **deps:** Update dependency @codemirror/commands to v6.6.1 ([87f9cf5](https://github.com/ThimoDEV/nuxt-codemirror/commit/87f9cf5)) 82 | - **deps:** Update nuxtjs monorepo to v3.13.1 ([f1cc79b](https://github.com/ThimoDEV/nuxt-codemirror/commit/f1cc79b)) 83 | - **deps:** Update dependency @uiw/codemirror-extensions-basic-setup to v4.23.1 ([5a15e70](https://github.com/ThimoDEV/nuxt-codemirror/commit/5a15e70)) 84 | - **deps:** Update dependency @uiw/codemirror-extensions-line-numbers-relative to v4.23.1 ([ac39581](https://github.com/ThimoDEV/nuxt-codemirror/commit/ac39581)) 85 | - **deps:** Update dependency @uiw/codemirror-theme-okaidia to v4.23.1 ([81ecb16](https://github.com/ThimoDEV/nuxt-codemirror/commit/81ecb16)) 86 | - **deps:** Update dependency @uiw/codemirror-extensions-line-numbers-relative to v4.23.2 ([a2308b4](https://github.com/ThimoDEV/nuxt-codemirror/commit/a2308b4)) 87 | - **deps:** Update dependency @uiw/codemirror-theme-okaidia to v4.23.2 ([e85e8e7](https://github.com/ThimoDEV/nuxt-codemirror/commit/e85e8e7)) 88 | - **deps:** Update dependency @uiw/codemirror-extensions-basic-setup to v4.23.2 ([b611740](https://github.com/ThimoDEV/nuxt-codemirror/commit/b611740)) 89 | - **deps:** Update nuxtjs monorepo to v3.13.2 ([144d132](https://github.com/ThimoDEV/nuxt-codemirror/commit/144d132)) 90 | - **deps:** Update dependency @uiw/codemirror-extensions-line-numbers-relative to v4.23.3 ([e9c962b](https://github.com/ThimoDEV/nuxt-codemirror/commit/e9c962b)) 91 | - **deps:** Update dependency @uiw/codemirror-theme-okaidia to v4.23.3 ([27d0086](https://github.com/ThimoDEV/nuxt-codemirror/commit/27d0086)) 92 | - **deps:** Update codemirror ([c9a0d06](https://github.com/ThimoDEV/nuxt-codemirror/commit/c9a0d06)) 93 | - **deps:** Update dependency @uiw/codemirror-extensions-basic-setup to v4.23.3 ([380b5f1](https://github.com/ThimoDEV/nuxt-codemirror/commit/380b5f1)) 94 | - **deps:** Update dependency @uiw/codemirror-extensions-basic-setup to v4.23.4 ([496ec5f](https://github.com/ThimoDEV/nuxt-codemirror/commit/496ec5f)) 95 | - **deps:** Update dependency @uiw/codemirror-extensions-line-numbers-relative to v4.23.4 ([92fa514](https://github.com/ThimoDEV/nuxt-codemirror/commit/92fa514)) 96 | - **deps:** Update dependency @uiw/codemirror-theme-okaidia to v4.23.4 ([373326f](https://github.com/ThimoDEV/nuxt-codemirror/commit/373326f)) 97 | - **deps:** Update dependency @babel/runtime to v7.25.7 ([0473cef](https://github.com/ThimoDEV/nuxt-codemirror/commit/0473cef)) 98 | - **deps:** Update dependency @uiw/codemirror-extensions-line-numbers-relative to v4.23.5 ([a595e50](https://github.com/ThimoDEV/nuxt-codemirror/commit/a595e50)) 99 | - **deps:** Update dependency @uiw/codemirror-theme-okaidia to v4.23.5 ([fd364e2](https://github.com/ThimoDEV/nuxt-codemirror/commit/fd364e2)) 100 | - **deps:** Update dependency @uiw/codemirror-extensions-basic-setup to v4.23.5 ([03630ab](https://github.com/ThimoDEV/nuxt-codemirror/commit/03630ab)) 101 | - **deps:** Update dependency @codemirror/commands to v6.7.0 ([b051a57](https://github.com/ThimoDEV/nuxt-codemirror/commit/b051a57)) 102 | - **deps:** Update dependency @uiw/codemirror-extensions-line-numbers-relative to v4.23.6 ([292b9c9](https://github.com/ThimoDEV/nuxt-codemirror/commit/292b9c9)) 103 | - **deps:** Update dependency @uiw/codemirror-theme-okaidia to v4.23.6 ([ac997dd](https://github.com/ThimoDEV/nuxt-codemirror/commit/ac997dd)) 104 | - **deps:** Update codemirror ([42b6a65](https://github.com/ThimoDEV/nuxt-codemirror/commit/42b6a65)) 105 | - **deps:** Update dependency @uiw/codemirror-extensions-basic-setup to v4.23.7 ([f2ac049](https://github.com/ThimoDEV/nuxt-codemirror/commit/f2ac049)) 106 | - **deps:** Update dependency @uiw/codemirror-theme-okaidia to v4.23.7 ([9edd7f0](https://github.com/ThimoDEV/nuxt-codemirror/commit/9edd7f0)) 107 | - **deps:** Update dependency @babel/runtime to v7.26.0 ([ffd5994](https://github.com/ThimoDEV/nuxt-codemirror/commit/ffd5994)) 108 | 109 | ### 🏡 Chore 110 | 111 | - Update package.json homepage and lockfile ([ac0f22a](https://github.com/ThimoDEV/nuxt-codemirror/commit/ac0f22a)) 112 | 113 | ### ❤️ Contributors 114 | 115 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 116 | 117 | ## v0.0.11 118 | 119 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.10...v0.0.11) 120 | 121 | ### 🩹 Fixes 122 | 123 | - V-model not updating codemirror instance if changed externally ([fbfa2cb](https://github.com/ThimoDEV/nuxt-codemirror/commit/fbfa2cb)) 124 | 125 | ### 🏡 Chore 126 | 127 | - **docs:** Update readme ([06b149a](https://github.com/ThimoDEV/nuxt-codemirror/commit/06b149a)) 128 | 129 | ### ❤️ Contributors 130 | 131 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 132 | 133 | ## v0.0.10 134 | 135 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.9...v0.0.10) 136 | 137 | ### 🩹 Fixes 138 | 139 | - **deps:** Update dependency @codemirror/view to v6.30.0 ([551736c](https://github.com/ThimoDEV/nuxt-codemirror/commit/551736c)) 140 | 141 | ### 📖 Documentation 142 | 143 | - **readme:** Improvements ([6c2b035](https://github.com/ThimoDEV/nuxt-codemirror/commit/6c2b035)) 144 | 145 | ### 🏡 Chore 146 | 147 | - Add renovate.json ([80d088d](https://github.com/ThimoDEV/nuxt-codemirror/commit/80d088d)) 148 | - Fix linting issues ([c1595a0](https://github.com/ThimoDEV/nuxt-codemirror/commit/c1595a0)) 149 | 150 | ### ❤️ Contributors 151 | 152 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 153 | - Sébastien Chopin 154 | 155 | ## v0.0.9 156 | 157 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.8...v0.0.9) 158 | 159 | ### 🏡 Chore 160 | 161 | - Update package.json ([a7bf947](https://github.com/ThimoDEV/nuxt-codemirror/commit/a7bf947)) 162 | 163 | ### ❤️ Contributors 164 | 165 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 166 | 167 | ## v0.0.8 168 | 169 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.7...v0.0.8) 170 | 171 | ### 🚀 Enhancements 172 | 173 | - Add babel/runtime to support more extensions ([802f944](https://github.com/ThimoDEV/nuxt-codemirror/commit/802f944)) 174 | 175 | ### 📖 Documentation 176 | 177 | - Add docs for components and update FAQ ([0bca0d6](https://github.com/ThimoDEV/nuxt-codemirror/commit/0bca0d6)) 178 | - Cleanup code and add documentation ([4e64130](https://github.com/ThimoDEV/nuxt-codemirror/commit/4e64130)) 179 | - Add tested section ([182c3c4](https://github.com/ThimoDEV/nuxt-codemirror/commit/182c3c4)) 180 | 181 | ### 🏡 Chore 182 | 183 | - Add playground theme example ([2895720](https://github.com/ThimoDEV/nuxt-codemirror/commit/2895720)) 184 | - Fix playground issue ([9e5ca76](https://github.com/ThimoDEV/nuxt-codemirror/commit/9e5ca76)) 185 | 186 | ### ❤️ Contributors 187 | 188 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 189 | 190 | ## v0.0.7 191 | 192 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.6...v0.0.7) 193 | 194 | ### 🩹 Fixes 195 | 196 | - Playground override incorrect ([8763279](https://github.com/ThimoDEV/nuxt-codemirror/commit/8763279)) 197 | - Module types not generated on build ([e3e9a31](https://github.com/ThimoDEV/nuxt-codemirror/commit/e3e9a31)) 198 | - On unmounted is placed inside onmounted warning ([9d65ba9](https://github.com/ThimoDEV/nuxt-codemirror/commit/9d65ba9)) 199 | - Remove unneeded nextTick for syncing template ref ([673e99b](https://github.com/ThimoDEV/nuxt-codemirror/commit/673e99b)) 200 | - Custom extensions not working ([c2f5844](https://github.com/ThimoDEV/nuxt-codemirror/commit/c2f5844)) 201 | 202 | ### 🏡 Chore 203 | 204 | - Upgrade @codemirror/view to latest version ([d655a96](https://github.com/ThimoDEV/nuxt-codemirror/commit/d655a96)) 205 | 206 | ### ❤️ Contributors 207 | 208 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 209 | 210 | ## v0.0.6 211 | 212 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.5...v0.0.6) 213 | 214 | ### 📖 Documentation 215 | 216 | - Add type explain code ([06b52ac](https://github.com/ThimoDEV/nuxt-codemirror/commit/06b52ac)) 217 | 218 | ### 🏡 Chore 219 | 220 | - Cleanup types and module config ([eda423d](https://github.com/ThimoDEV/nuxt-codemirror/commit/eda423d)) 221 | - Fix lint issues ([03e232e](https://github.com/ThimoDEV/nuxt-codemirror/commit/03e232e)) 222 | 223 | ### ❤️ Contributors 224 | 225 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 226 | 227 | ## v0.0.5 228 | 229 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.4...v0.0.5) 230 | 231 | ### 🏡 Chore 232 | 233 | - Add export for types ([f8925cc](https://github.com/ThimoDEV/nuxt-codemirror/commit/f8925cc)) 234 | 235 | ### ❤️ Contributors 236 | 237 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 238 | 239 | ## v0.0.4 240 | 241 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.3...v0.0.4) 242 | 243 | ### 🩹 Fixes 244 | 245 | - Types module name not defined ([651d271](https://github.com/ThimoDEV/nuxt-codemirror/commit/651d271)) 246 | 247 | ### ❤️ Contributors 248 | 249 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 250 | 251 | ## v0.0.3 252 | 253 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.1...v0.0.3) 254 | 255 | ### 🩹 Fixes 256 | 257 | - Duplicate codemirror/state causing extensions not working ([75f6f97](https://github.com/ThimoDEV/nuxt-codemirror/commit/75f6f97)) 258 | 259 | ### 🏡 Chore 260 | 261 | - Update readme ([c0f2574](https://github.com/ThimoDEV/nuxt-codemirror/commit/c0f2574)) 262 | - Fix tags in readme ([ad4a377](https://github.com/ThimoDEV/nuxt-codemirror/commit/ad4a377)) 263 | - Update readme install line ([d014ff0](https://github.com/ThimoDEV/nuxt-codemirror/commit/d014ff0)) 264 | - Update readme with credits ([6597299](https://github.com/ThimoDEV/nuxt-codemirror/commit/6597299)) 265 | - **release:** V0.0.2 ([5ad681f](https://github.com/ThimoDEV/nuxt-codemirror/commit/5ad681f)) 266 | 267 | ### ❤️ Contributors 268 | 269 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 270 | 271 | ## v0.0.2 272 | 273 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.1...v0.0.2) 274 | 275 | ### 🩹 Fixes 276 | 277 | - Duplicate codemirror/state causing extensions not working ([75f6f97](https://github.com/ThimoDEV/nuxt-codemirror/commit/75f6f97)) 278 | 279 | ### 🏡 Chore 280 | 281 | - Update readme ([c0f2574](https://github.com/ThimoDEV/nuxt-codemirror/commit/c0f2574)) 282 | - Fix tags in readme ([ad4a377](https://github.com/ThimoDEV/nuxt-codemirror/commit/ad4a377)) 283 | - Update readme install line ([d014ff0](https://github.com/ThimoDEV/nuxt-codemirror/commit/d014ff0)) 284 | - Update readme with credits ([6597299](https://github.com/ThimoDEV/nuxt-codemirror/commit/6597299)) 285 | 286 | ### ❤️ Contributors 287 | 288 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 289 | 290 | ## v0.0.1 291 | 292 | [compare changes](https://github.com/ThimoDEV/nuxt-codemirror/compare/v0.0.2...v0.0.1) 293 | 294 | ### 🏡 Chore 295 | 296 | - Linting ([e85e414](https://github.com/ThimoDEV/nuxt-codemirror/commit/e85e414)) 297 | 298 | ### ❤️ Contributors 299 | 300 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 301 | 302 | ## v0.0.2 303 | 304 | 305 | ### 🚀 Enhancements 306 | 307 | - WIP codemirro logic from react version ([4fb81ee](https://github.com/your-org/my-module/commit/4fb81ee)) 308 | 309 | ### 🩹 Fixes 310 | 311 | - Codemirror visible in playground ([7a39972](https://github.com/your-org/my-module/commit/7a39972)) 312 | - Typos ([87f94f2](https://github.com/your-org/my-module/commit/87f94f2)) 313 | - Extensions EditorState duplicate error ([f058d19](https://github.com/your-org/my-module/commit/f058d19)) 314 | - DefineExpose not working through refs ([2e0c0df](https://github.com/your-org/my-module/commit/2e0c0df)) 315 | - Attrs composable not needed, added onFocus and onBlur events ([31a54ec](https://github.com/your-org/my-module/commit/31a54ec)) 316 | - Types and repo templates ([7eb6415](https://github.com/your-org/my-module/commit/7eb6415)) 317 | - V-model not working ([6a44d6c](https://github.com/your-org/my-module/commit/6a44d6c)) 318 | 319 | ### 🏡 Chore 320 | 321 | - Init ([f18245e](https://github.com/your-org/my-module/commit/f18245e)) 322 | - Update deps and config ([c105c52](https://github.com/your-org/my-module/commit/c105c52)) 323 | - Cleanup code ([484dcfa](https://github.com/your-org/my-module/commit/484dcfa)) 324 | - Capitalcase change not tracked by git ([67917de](https://github.com/your-org/my-module/commit/67917de)) 325 | - Small cleanup ([6ef57f8](https://github.com/your-org/my-module/commit/6ef57f8)) 326 | 327 | ### ❤️ Contributors 328 | 329 | - Thimo ([@ThimoDEV](http://github.com/ThimoDEV)) 330 | 331 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Dockerfile with PNPM for Nuxt - v1.2.1 2 | # https://gist.github.com/sandros94/03675514546f17af1fd6db3863c043b4 3 | 4 | # Base configuration 5 | ARG node_tag=22-alpine 6 | FROM node:${node_tag} AS base 7 | WORKDIR /app 8 | 9 | # Builder 10 | FROM base AS builder 11 | ENV PNPM_HOME="/pnpm" 12 | ENV PATH="$PNPM_HOME:$PATH" 13 | 14 | COPY package.json pnpm-lock.yaml pnpm-workspace.yaml .npmrc /app/ 15 | COPY /docs/package.json /app/docs/ 16 | COPY /playground/package.json /app/playground/ 17 | RUN npm i -g --force corepack && corepack enable 18 | 19 | RUN --mount=type=cache,id=pnpm,target=/pnpm/store \ 20 | pnpm install --frozen-lockfile --shamefully-hoist 21 | 22 | ARG NUXT_UI_PRO_LICENSE 23 | 24 | COPY . . 25 | RUN pnpm run dev:prepare 26 | RUN --mount=type=cache,id=nuxt,target=/app/node_modules/.cache/nuxt/.nuxt \ 27 | pnpm run docs:build 28 | 29 | # Final production container 30 | FROM base AS runtime 31 | ARG NODE_ENV=production 32 | ENV NODE_ENV=${NODE_ENV} 33 | 34 | USER node 35 | EXPOSE 3000 36 | HEALTHCHECK --retries=10 --start-period=5s \ 37 | CMD wget --no-verbose --spider http://0.0.0.0:80/ || exit 1 38 | 39 | COPY --link --from=builder /app/docs/.output/ ./ 40 | 41 | ENTRYPOINT [ "node", "server/index.mjs" ] 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Thimo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt CodeMirror 2 | 3 | [![npm version][npm-version-src]][npm-version-href] 4 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 5 | [![License][license-src]][license-href] 6 | [![Nuxt][nuxt-src]][nuxt-href] 7 | 8 | Codemirror as a Nuxt module. Demo can be found in below playground 9 | 10 | 11 | - [✨  Release Notes](/CHANGELOG.md) 12 | - [🏀 Online playground](https://stackblitz.com/edit/nuxt-starter-ev2hgm?file=app.vue) 13 | 14 | 15 | ## Features 16 | 17 | 18 | - 🚀 Easily configure codemirror to your own needs using almost every API 19 | - 🚠 Built with Typescript 20 | - 🌲 Custom useNuxtCodeMirror composable for creating your own editor 21 | - Built for CodeMirror 6 and above 22 | 23 | ## Documentation 24 | 25 | This module consists of one Component, one Composable and a few types for you to use. 26 | Read the CodeMirror Reference guide for more in depth information: [CodeMirror docs](https://codemirror.net/docs/ref/) 27 | 28 | ### NuxtCodeMirror.vue 29 | This component is auto imported and is the CodeMirror wrapper. 30 | 31 | Component props: 32 | 33 | ```ts 34 | interface NuxtCodeMirrorProps 35 | extends Omit { 36 | /** value of the auto created model in the editor. Works as underlying logic of a V-Model */ 37 | modelValue?: string 38 | /** The height value of the editor. */ 39 | height?: string 40 | /** The minimum height value of the editor. */ 41 | minHeight?: string 42 | /** The maximum height value of the editor. */ 43 | maxHeight?: string 44 | /** The width value of the editor. */ 45 | width?: string 46 | /** The minimum width value of the editor. */ 47 | minWidth?: string 48 | /** The maximum width value of the editor. */ 49 | maxWidth?: string 50 | /** focus on the editor. */ 51 | autoFocus?: boolean 52 | /** Enables a placeholder—a piece of example content to show when the editor is empty. */ 53 | placeholder?: string | HTMLElement 54 | /** 55 | * `light` / `dark` / `Extension` Defaults to `light`. 56 | * @default light 57 | */ 58 | theme?: 'light' | 'dark' | 'none' | Extension 59 | /** 60 | * Whether to optional basicSetup by default 61 | * @default true 62 | */ 63 | basicSetup?: boolean | BasicSetupOptions 64 | /** 65 | * This disables editing of the editor content by the user. 66 | * @default true 67 | */ 68 | editable?: boolean 69 | /** 70 | * This disables editing of the editor content by the user. 71 | * @default false 72 | */ 73 | readOnly?: boolean 74 | /** 75 | * Controls whether pressing the `Tab` key inserts a tab character and indents the text (`true`) 76 | * or behaves according to the browser's default behavior (`false`). 77 | * @default true 78 | */ 79 | indentWithTab?: boolean 80 | /** Fired whenever a change occurs to the document. */ 81 | onChange?(value: string, viewUpdate: ViewUpdate): void 82 | /** Some data on the statistics editor. */ 83 | onStatistics?(data: Statistics): void 84 | /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */ 85 | onUpdate?(viewUpdate: ViewUpdate): void 86 | /** The first time the editor executes the event. */ 87 | onCreateEditor?(view: EditorView, state: EditorState): void 88 | /** Fired whenever the editor is focused. */ 89 | onFocus?(view: ViewUpdate): void 90 | /** Fired whenever the editor is blurred. */ 91 | onBlur?(view: ViewUpdate): void 92 | /** 93 | * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information. 94 | * They can either be built-in extension-providing objects, 95 | * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of), 96 | * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed. 97 | */ 98 | extensions?: Extension[] 99 | /** 100 | * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here. 101 | * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root) 102 | */ 103 | root?: ShadowRoot | Document 104 | /** 105 | * Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function 106 | */ 107 | initialState?: { 108 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 109 | json: any 110 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 111 | fields?: Record> 112 | } 113 | } 114 | ``` 115 | 116 | The NuxtCodeMirror component accepts a Template ref and exposes The CodeMirror div element, the Editor view and the Editor State 117 | 118 | ```ts 119 | interface CodeMirrorRef { 120 | /** Container element of the CodeMirror instance */ 121 | container: HTMLDivElement | null 122 | /** The EditorView of the CodeMirror instance */ 123 | view: EditorView | undefined 124 | /** The EditorState of the CodeMirror instance */ 125 | state: EditorState | undefined 126 | /** Editor element of the CodeMirror instance */ 127 | editor: HTMLDivElement | null 128 | } 129 | ``` 130 | 131 | If you need access to the underlying CodeMirror instance You can do so by adding a ref with the same name as your Template ref. 132 | An example on how to do this can be found here: [🏀 Online playground](https://stackblitz.com/edit/nuxt-starter-ev2hgm?file=app.vue) 133 | 134 | 135 | If for some reason you want to write your own CodeMirror component then you can do that too :) 136 | 137 | ### UseNuxtCodeMirror.ts 138 | 139 | This composable is the underlying magic of the NuxtCodeMirror component and is also auto imported. 140 | 141 | It requires minimum 3 Refs, one for the div element CodeMirror will connect to, one for the CodeMirror view, and one for the CodeMirror state 142 | 143 | Make sure you execute the composable in `onMounted` otherwise you will get an eror because codemirror can't be linked to the DOM. 144 | 145 | ```ts 146 | const editor = ref(null) 147 | const container = ref(null) 148 | const view = ref() 149 | const state = ref() 150 | 151 | onMounted(() => { 152 | useNuxtCodeMirror({ 153 | ...props, 154 | container: editor.value, 155 | viewRef: view, 156 | stateRef: state, 157 | containerRef: container, 158 | }) 159 | }) 160 | ``` 161 | 162 | For more information on how this is implemented see the [source](https://github.com/ThimoDEV/nuxt-codemirror/blob/master/src/runtime/components/NuxtCodeMirror.vue), to get inspiration for your own version 163 | 164 | ## Credits 165 | 166 | This Nuxt module wouldn't be possible without: 167 | 168 | - @uiw/react-codemirror: https://github.com/uiwjs/react-codemirror 169 | - @surmon-china/vue-codemirror: https://github.com/surmon-china/vue-codemirror 170 | 171 | ## Quick Setup 172 | 173 | Install the module to your Nuxt application with one command: 174 | 175 | ```bash 176 | npx nuxi module add nuxt-codemirror 177 | ``` 178 | 179 | That's it! You can now use Nuxt-codemirror in your Nuxt app ✨ 180 | 181 | ### Tested extensions 182 | 183 | Below is a list of tested extensions you can use as of @codemirror/view version 6.29.1 and @codemirror/state verion 6.4.1 184 | 185 | - [LineNumbersRelative](https://www.npmjs.com/package/@uiw/codemirror-extensions-line-numbers-relative) 186 | - [lang-javascript](https://www.npmjs.com/package/@codemirror/lang-javascript) 187 | - [IndentationMarkers](https://github.com/replit/codemirror-indentation-markers) 188 | - [interact](https://github.com/replit/codemirror-interact) 189 | - [Themes -- like](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) 190 | - [Zebra Stripes](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes) 191 | 192 | and many more... 193 | 194 | ## Contribution 195 | 196 | If you have ideas or bugs feel free to start by opening an issue. For ideas please start a Discussion. 197 | 198 | I welcome any kind of contribution Thank you in advance!! 199 | 200 |
201 | Local development 202 | 203 | ```bash 204 | # Install dependencies 205 | pnpm i 206 | 207 | # Generate type stubs 208 | pnpm dev:prepare 209 | 210 | # Develop with the playground 211 | pnpm dev 212 | 213 | # Build the playground 214 | pnpm dev:build 215 | 216 | # Run ESLint 217 | pnpm lint 218 | 219 | # Run Vitest 220 | pnpm test 221 | pnpm test:watch 222 | 223 | # Release new version 224 | pnpm release 225 | ``` 226 | 227 |
228 | 229 | 230 | 231 | [npm-version-src]: https://img.shields.io/npm/v/nuxt-codemirror/latest.svg?style=flat&colorA=020420&colorB=00DC82 232 | [npm-version-href]: https://npmjs.com/package/nuxt-codemirror 233 | 234 | [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-codemirror.svg?style=flat&colorA=020420&colorB=00DC82 235 | [npm-downloads-href]: https://npmjs.com/package/nuxt-codemirror 236 | 237 | [license-src]: https://img.shields.io/npm/l/nuxt-codemirror.svg?style=flat&colorA=020420&colorB=00DC82 238 | [license-href]: https://npmjs.com/package/nuxt-codemirror 239 | 240 | [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js 241 | [nuxt-href]: https://nuxt.com 242 | 243 | 244 | 245 | ## FAQ 246 | 247 | Issue 248 | - I get errors when starting the dev server with your module: `Pre-transform error: Failed to resolve import "@codemirror/view"`, `Pre-transform error: Failed to resolve import "@codemirror/state"`. 249 | 250 | Solution 251 | - Assuming you use pnpm with `shamefully-hoist=false` install `@codemirror/state` and `@codemirror/view` and these errors should disappear 252 | -------------------------------------------------------------------------------- /client/.nuxtrc: -------------------------------------------------------------------------------- 1 | imports.autoImport=true 2 | -------------------------------------------------------------------------------- /client/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /client/components/DevtoolsPane.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 32 | -------------------------------------------------------------------------------- /client/components/ModuleAuthorNote.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 29 | -------------------------------------------------------------------------------- /client/global.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | __CODEMIRROR__DEVTOOLS__?: { 3 | cb: () => void 4 | // You can add other properties of __CODEMIRROR__DEVTOOLS__ here if needed 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /client/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'pathe' 2 | 3 | export default defineNuxtConfig({ 4 | 5 | modules: [ 6 | '@nuxt/devtools-ui-kit', 7 | '@nuxt/icon', 8 | '@nuxt/ui', 9 | ], 10 | ssr: false, 11 | 12 | app: { 13 | baseURL: '/__codemirror_nuxt_devtools', 14 | }, 15 | 16 | compatibilityDate: '2025-03-16', 17 | 18 | nitro: { 19 | output: { 20 | publicDir: resolve(__dirname, '../dist/client'), 21 | }, 22 | }, 23 | 24 | icon: { 25 | size: '24px', // default size applied 26 | class: 'icon', // default class applied 27 | aliases: { 28 | mesh: 'carbon:code', 29 | }, 30 | }, 31 | }) 32 | -------------------------------------------------------------------------------- /client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codemirror-nuxt-devtools", 3 | "type": "module", 4 | "private": true 5 | } 6 | -------------------------------------------------------------------------------- /client/pages/index.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 51 | -------------------------------------------------------------------------------- /client/utils/index.ts: -------------------------------------------------------------------------------- 1 | // add your types here 2 | -------------------------------------------------------------------------------- /docs/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /docs/.env.example: -------------------------------------------------------------------------------- 1 | # Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase 2 | NUXT_UI_PRO_LICENSE= 3 | 4 | # Public URL, used for OG Image when running nuxt generate 5 | NUXT_PUBLIC_SITE_URL= 6 | -------------------------------------------------------------------------------- /docs/.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: push 4 | 5 | jobs: 6 | ci: 7 | runs-on: ${{ matrix.os }} 8 | 9 | strategy: 10 | matrix: 11 | os: [ubuntu-latest] 12 | node: [22] 13 | 14 | steps: 15 | - name: Checkout 16 | uses: actions/checkout@v4 17 | 18 | - name: Install pnpm 19 | uses: pnpm/action-setup@v4 20 | 21 | - name: Install node 22 | uses: actions/setup-node@v4 23 | with: 24 | node-version: ${{ matrix.node }} 25 | cache: pnpm 26 | 27 | - name: Install dependencies 28 | run: pnpm install 29 | 30 | - name: Lint 31 | run: pnpm run lint 32 | 33 | - name: Typecheck 34 | run: pnpm run typecheck 35 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | 26 | # VSC 27 | .history 28 | -------------------------------------------------------------------------------- /docs/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ![nuxt-ui-docs-social-card](https://github.com/nuxt-ui-pro/docs/assets/739984/f64e13d9-9ae0-4e03-bf7f-6be4c36cd9ba) 2 | 3 | # Nuxt UI Pro - Docs template 4 | 5 | [![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro) 6 | [![Nuxt Studio](https://img.shields.io/badge/Open%20in%20Nuxt%20Studio-18181B?&logo=nuxt.js&logoColor=3BB5EC)](https://nuxt.studio/themes/docs) 7 | 8 | - [Live demo](https://docs-template.nuxt.dev) 9 | - [Documentation](https://ui.nuxt.com/getting-started/installation/pro/nuxt) 10 | - [Clone on Nuxt Studio](https://content.nuxt.com/templates/docs) 11 | 12 | [![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?repo=nuxt-ui-pro/docs) 13 | 14 | ## Quick Start 15 | 16 | ```bash [Terminal] 17 | npx nuxi init -t github:nuxt-ui-pro/docs 18 | ``` 19 | 20 | ## Setup 21 | 22 | Make sure to install the dependencies: 23 | 24 | ```bash 25 | # npm 26 | npm install 27 | 28 | # pnpm 29 | pnpm install 30 | 31 | # yarn 32 | yarn install 33 | 34 | # bun 35 | bun install 36 | ``` 37 | 38 | ## Development Server 39 | 40 | Start the development server on `http://localhost:3000`: 41 | 42 | ```bash 43 | # npm 44 | npm run dev 45 | 46 | # pnpm 47 | pnpm run dev 48 | 49 | # yarn 50 | yarn dev 51 | 52 | # bun 53 | bun run dev 54 | ``` 55 | 56 | ## Production 57 | 58 | Build the application for production: 59 | 60 | ```bash 61 | # npm 62 | npm run build 63 | 64 | # pnpm 65 | pnpm run build 66 | 67 | # yarn 68 | yarn build 69 | 70 | # bun 71 | bun run build 72 | ``` 73 | 74 | Locally preview production build: 75 | 76 | ```bash 77 | # npm 78 | npm run preview 79 | 80 | # pnpm 81 | pnpm run preview 82 | 83 | # yarn 84 | yarn preview 85 | 86 | # bun 87 | bun run preview 88 | ``` 89 | 90 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 91 | 92 | ## Nuxt Studio integration 93 | 94 | Studio is an intuitive CMS interface to edit your Nuxt Content websites. 95 | 96 | It take advantage of the Preview API included in Nuxt Content to propose the best editing experience for your content files. Editors can benefit from a user-friendly interface to edit their Markdown, YAML or JSON files. 97 | 98 | You can import your project on the platform without any extra setup. 99 | 100 | However to enable the live preview on the platform, you just need to activate studio in the content configuration of your `nuxt.config.ts` file. 101 | 102 | ```ts [nuxt.config.ts] 103 | export default defineNuxtConfig({ 104 | content: { 105 | preview: { 106 | api: 'https://api.nuxt.studio' 107 | } 108 | } 109 | }) 110 | ``` 111 | 112 | Read more on [Nuxt Studio docs](https://content.nuxt.com/studio/setup). 113 | 114 | ## Renovate integration 115 | 116 | Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go. 117 | -------------------------------------------------------------------------------- /docs/app/app.config.ts: -------------------------------------------------------------------------------- 1 | export default defineAppConfig({ 2 | ui: { 3 | colors: { 4 | primary: 'green', 5 | neutral: 'slate', 6 | }, 7 | }, 8 | uiPro: { 9 | footer: { 10 | slots: { 11 | root: 'border-t border-(--ui-border)', 12 | left: 'text-sm text-(--ui-text-muted)', 13 | }, 14 | }, 15 | }, 16 | seo: { 17 | siteName: 'Nuxt Codemirror', 18 | }, 19 | header: { 20 | title: 'Nuxt Codemirror', 21 | to: '/', 22 | logo: { 23 | alt: '', 24 | light: '', 25 | dark: '', 26 | }, 27 | search: true, 28 | colorMode: true, 29 | links: [{ 30 | 'icon': 'i-simple-icons-github', 31 | 'to': 'https://github.com/ThimoDEV/nuxt-codemirror', 32 | 'target': '_blank', 33 | 'aria-label': 'GitHub', 34 | }], 35 | }, 36 | footer: { 37 | credits: `Copyright © ${new Date().getFullYear()}`, 38 | colorMode: false, 39 | links: [{ 40 | 'icon': 'i-simple-icons-nuxtdotjs', 41 | 'to': 'https://nuxt.com', 42 | 'target': '_blank', 43 | 'aria-label': 'Nuxt Website', 44 | }, { 45 | 'icon': 'i-simple-icons-discord', 46 | 'to': 'https://discord.com/invite/ps2h6QT', 47 | 'target': '_blank', 48 | 'aria-label': 'Nuxt UI on Discord', 49 | }, { 50 | 'icon': 'i-simple-icons-x', 51 | 'to': 'https://x.com/nuxt_js', 52 | 'target': '_blank', 53 | 'aria-label': 'Nuxt on X', 54 | }, { 55 | 'icon': 'i-simple-icons-github', 56 | 'to': 'https://github.com/ThimoDEV/nuxt-codemirror', 57 | 'target': '_blank', 58 | 'aria-label': 'Nuxt Codemirror Module on GitHub', 59 | }], 60 | }, 61 | toc: { 62 | title: 'Table of Contents', 63 | bottom: { 64 | title: 'Community', 65 | edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content', 66 | links: [{ 67 | icon: 'i-lucide-star', 68 | label: 'Star on GitHub', 69 | to: 'https://github.com/ThimoDEV/nuxt-codemirror', 70 | target: '_blank', 71 | }, { 72 | icon: 'i-lucide-book-open', 73 | label: 'Nuxt UI Pro docs', 74 | to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt', 75 | target: '_blank', 76 | }, { 77 | icon: 'i-simple-icons-nuxtdotjs', 78 | label: 'Purchase a license', 79 | to: 'https://ui.nuxt.com/pro/purchase', 80 | target: '_blank', 81 | }], 82 | }, 83 | }, 84 | }) 85 | -------------------------------------------------------------------------------- /docs/app/app.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 52 | -------------------------------------------------------------------------------- /docs/app/assets/css/main.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss" theme(static); 2 | @import "@nuxt/ui-pro"; 3 | 4 | @source "../../../content/**/*"; 5 | 6 | @theme static { 7 | --font-sans: 'Public Sans', sans-serif; 8 | 9 | --color-green-50: #EFFDF5; 10 | --color-green-100: #D9FBE8; 11 | --color-green-200: #B3F5D1; 12 | --color-green-300: #75EDAE; 13 | --color-green-400: #00DC82; 14 | --color-green-500: #00C16A; 15 | --color-green-600: #00A155; 16 | --color-green-700: #007F45; 17 | --color-green-800: #016538; 18 | --color-green-900: #0A5331; 19 | --color-green-950: #052E16; 20 | } 21 | -------------------------------------------------------------------------------- /docs/app/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /docs/app/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 81 | -------------------------------------------------------------------------------- /docs/app/components/LogoPro.vue: -------------------------------------------------------------------------------- 1 | 53 | -------------------------------------------------------------------------------- /docs/app/components/OgImage/OgImageDocs.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 77 | -------------------------------------------------------------------------------- /docs/app/components/TemplateMenu.vue: -------------------------------------------------------------------------------- 1 | 40 | -------------------------------------------------------------------------------- /docs/app/error.vue: -------------------------------------------------------------------------------- 1 | 2 | 27 | 28 | 44 | -------------------------------------------------------------------------------- /docs/app/layouts/docs.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 24 | -------------------------------------------------------------------------------- /docs/app/pages/[...slug].vue: -------------------------------------------------------------------------------- 1 | 2 | 54 | 55 | 106 | -------------------------------------------------------------------------------- /docs/app/pages/index.vue: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /docs/content.config.ts: -------------------------------------------------------------------------------- 1 | import { defineContentConfig, defineCollection, z } from '@nuxt/content' 2 | 3 | export default defineContentConfig({ 4 | collections: { 5 | landing: defineCollection({ 6 | type: 'page', 7 | source: 'index.md', 8 | }), 9 | docs: defineCollection({ 10 | type: 'page', 11 | source: { 12 | include: '**', 13 | exclude: ['index.md'], 14 | }, 15 | schema: z.object({ 16 | links: z.array(z.object({ 17 | label: z.string(), 18 | icon: z.string(), 19 | to: z.string(), 20 | target: z.string().optional(), 21 | })).optional(), 22 | }), 23 | }), 24 | }, 25 | }) 26 | -------------------------------------------------------------------------------- /docs/content/1.getting-started/.navigation.yml: -------------------------------------------------------------------------------- 1 | title: Getting Started 2 | icon: false 3 | -------------------------------------------------------------------------------- /docs/content/1.getting-started/1.index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | description: Welcome to Nuxt UI Pro documentation template. 4 | navigation: 5 | icon: i-lucide-house 6 | --- 7 | 8 | This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes. 9 | 10 | There are already many websites based on this template: 11 | 12 | ::card-group 13 | :::card 14 | --- 15 | icon: i-simple-icons-nuxtdotjs 16 | target: _blank 17 | title: Nuxt 18 | to: https://nuxt.com 19 | --- 20 | The Nuxt website 21 | ::: 22 | 23 | :::card 24 | --- 25 | icon: i-simple-icons-nuxtdotjs 26 | target: _blank 27 | title: Nuxt UI 28 | to: https://ui.nuxt.com 29 | --- 30 | The documentation of `@nuxt/ui` and `@nuxt/ui-pro` 31 | ::: 32 | 33 | :::card 34 | --- 35 | icon: i-simple-icons-nuxtdotjs 36 | target: _blank 37 | title: Nuxt Image 38 | to: https://image.nuxt.com 39 | --- 40 | The documentation of `@nuxt/image` 41 | ::: 42 | 43 | :::card 44 | --- 45 | icon: i-simple-icons-nuxtdotjs 46 | target: _blank 47 | title: Nuxt Content 48 | to: https://content.nuxt.com 49 | --- 50 | The documentation of `@nuxt/content` 51 | ::: 52 | 53 | :::card 54 | --- 55 | icon: i-simple-icons-nuxtdotjs 56 | target: _blank 57 | title: Nuxt Devtools 58 | to: https://devtools.nuxt.com 59 | --- 60 | The documentation of `@nuxt/devtools` 61 | ::: 62 | 63 | :::card 64 | --- 65 | icon: i-simple-icons-nuxtdotjs 66 | target: _blank 67 | title: Nuxt Hub 68 | to: https://hub.nuxt.com 69 | --- 70 | The best place to manage your projects, environments and variables. 71 | ::: 72 | :: 73 | 74 | ## Key Features 75 | 76 | This template includes a range of features designed to streamline documentation management: 77 | 78 | - **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance. 79 | - **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components. 80 | - [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content. 81 | - [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Offers integration with Nuxt Studio for content editing. 82 | - **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure. 83 | - **Full-Text Search**: Includes built-in search functionality for content discovery. 84 | - **Optimized Typography**: Features refined typography for enhanced readability. 85 | - **Dark Mode**: Offers dark mode support for user preference. 86 | - **Extensive Functionality**: Explore the template to fully appreciate its capabilities. 87 | -------------------------------------------------------------------------------- /docs/content/1.getting-started/2.installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installation 3 | description: Get started with Nuxt UI Pro documentation template. 4 | navigation: 5 | icon: i-lucide-download 6 | --- 7 | 8 | ::tip{target="_blank" to="https://content.nuxt.com/templates/docs"} 9 | Use this template on Nuxt Studio and start your documentation in seconds. 10 | :: 11 | 12 | ## Quick Start 13 | 14 | You can start a fresh new project with: 15 | 16 | ```bash [Terminal] 17 | npx nuxi init -t github:nuxt-ui-pro/docs 18 | ``` 19 | 20 | or create a new repository from GitHub: 21 | 22 | 1. Open 23 | 2. Click on `Use this template` button 24 | 3. Enter repository name and click on `Create repository from template` button 25 | 4. Clone your new repository 26 | 5. Install dependencies with your favorite package manager 27 | 6. Start development server 28 | 29 | That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀 30 | -------------------------------------------------------------------------------- /docs/content/1.getting-started/3.usage.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Usage 3 | description: Learn how to write and customize your documentation. 4 | navigation: 5 | icon: i-lucide-sliders 6 | --- 7 | 8 | This is only a basic example of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews. 9 | 10 | ::tip 11 | --- 12 | target: _blank 13 | to: https://ui.nuxt.com/getting-started/installation/pro/nuxt 14 | --- 15 | Learn more on how to take the most out of Nuxt UI Pro! 16 | :: 17 | 18 | ## Writing content 19 | 20 | You can just start writing `.md` or `.yml` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search. 21 | 22 | ## App Configuration 23 | 24 | In addition to `@nuxt/ui-pro` configuration through the `app.config.ts`, this template lets you customize the `Header`, `Footer` and the `Table of contents` components. 25 | 26 | ### Header 27 | 28 | ```ts [app.config.ts] 29 | export default defineAppConfig({ 30 | header: { 31 | title: '', 32 | to: '/', 33 | // Logo configuration 34 | logo: { 35 | alt: '', 36 | // Light mode 37 | light: '', 38 | // Dark mode 39 | dark: '' 40 | }, 41 | // Show or hide the search bar 42 | search: true, 43 | // Show or hide the color mode button 44 | colorMode: true, 45 | // Customize links 46 | links: [{ 47 | 'icon': 'i-simple-icons-github', 48 | 'to': 'https://github.com/nuxt-ui-pro/docs', 49 | 'target': '_blank', 50 | 'aria-label': 'GitHub' 51 | }] 52 | }, 53 | }) 54 | ``` 55 | 56 | ### Footer 57 | 58 | ```ts [app.config.ts] 59 | export default defineAppConfig({ 60 | footer: { 61 | // Update bottom left credits 62 | credits: `Copyright © ${new Date().getFullYear()}`, 63 | // Show or hide the color mode button 64 | colorMode: false, 65 | // Customize links 66 | links: [{ 67 | 'icon': 'i-simple-icons-nuxtdotjs', 68 | 'to': 'https://nuxt.com', 69 | 'target': '_blank', 70 | 'aria-label': 'Nuxt Website' 71 | }, { 72 | 'icon': 'i-simple-icons-discord', 73 | 'to': 'https://discord.com/invite/ps2h6QT', 74 | 'target': '_blank', 75 | 'aria-label': 'Nuxt UI on Discord' 76 | }, { 77 | 'icon': 'i-simple-icons-x', 78 | 'to': 'https://x.com/nuxt_js', 79 | 'target': '_blank', 80 | 'aria-label': 'Nuxt on X' 81 | }, { 82 | 'icon': 'i-simple-icons-github', 83 | 'to': 'https://github.com/nuxt/ui', 84 | 'target': '_blank', 85 | 'aria-label': 'Nuxt UI on GitHub' 86 | }] 87 | }, 88 | }) 89 | ``` 90 | 91 | ### Table of contents 92 | 93 | ```ts [app.config.ts] 94 | export default defineAppConfig({ 95 | toc: { 96 | // Title of the main table of contents 97 | title: 'Table of Contents', 98 | // Customize links 99 | bottom: { 100 | // Title of the bottom table of contents 101 | title: 'Community', 102 | // URL of your repository content folder 103 | edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content', 104 | links: [{ 105 | icon: 'i-lucide-star', 106 | label: 'Star on GitHub', 107 | to: 'https://github.com/nuxt/ui', 108 | target: '_blank' 109 | }, { 110 | icon: 'i-lucide-book-open', 111 | label: 'Nuxt UI Pro docs', 112 | to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt', 113 | target: '_blank' 114 | }, { 115 | icon: 'i-simple-icons-nuxtdotjs', 116 | label: 'Purchase a license', 117 | to: 'https://ui.nuxt.com/pro/purchase', 118 | target: '_blank' 119 | }] 120 | } 121 | } 122 | }) 123 | ``` 124 | 125 | ::tip{target="_blank" to="https://content.nuxt.com/docs/studio/config"} 126 | This template integrates with Nuxt Studio, providing a visual interface for editing your documentation - perfect for non-technical contributors. 127 | :: 128 | -------------------------------------------------------------------------------- /docs/content/2.essentials/.navigation.yml: -------------------------------------------------------------------------------- 1 | title: Essentials 2 | -------------------------------------------------------------------------------- /docs/content/2.essentials/1.markdown-syntax.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown Syntax 3 | description: Text, title, and styling in standard markdown. 4 | navigation: 5 | icon: i-lucide-heading-1 6 | --- 7 | 8 | ## Titles 9 | 10 | Use titles to introduce main sections. They structure your documentation and help users navigate content. 11 | 12 | ::code-preview 13 | --- 14 | class: "[&>div]:*:my-0" 15 | --- 16 | ## Titles 17 | 18 | #code 19 | ```mdc 20 | ## Titles 21 | ``` 22 | :: 23 | 24 | ### Subtitles 25 | 26 | Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability. 27 | 28 | ::code-preview 29 | --- 30 | class: "[&>div]:*:my-0" 31 | --- 32 | ### Subtitles 33 | 34 | #code 35 | ```mdc 36 | ### Subtitles 37 | ``` 38 | :: 39 | 40 | ::tip 41 | Each title and subtitle creates an anchor and shows up automatically in the table of contents. 42 | :: 43 | 44 | ## Text Formatting 45 | 46 | Nuxt UI Pro supports most Markdown formatting options. 47 | 48 | | Style | How to use | Result | 49 | | ------ | ------------ | ---------- | 50 | | Bold | `**bold**` | **Bold** | 51 | | Italic | `*italic*` | *Italic* | 52 | | Strike | `~~strike~~` | ~~Strike~~ | 53 | 54 | Combine formatting for richer text styles and visual emphasis. 55 | 56 | | Style | How to use | Result | 57 | | ------------- | ------------------- | ----------------- | 58 | | Bold Italic | `**_bold italic_**` | ***Bold Italic*** | 59 | | Bold Strike | `~~**bold**~~` | ~~**Bold**~~ | 60 | | Italic Strike | `~~*italic*~~` | ~~*Italic*~~ | 61 | 62 | For exponents, indices, or mathematical notations, use HTML `` and `` tags. 63 | 64 | | Style | How to use | Result | 65 | | ----------- | ------------------------ | ----------- | 66 | | Superscript | `superscript` | superscript | 67 | | Subscript | `subscript` | subscript | 68 | 69 | ## Links 70 | 71 | Links connect different parts of your documentation and external resources, essential for user navigation and providing references. 72 | To create a link, wrap the link text in brackets `[]()`. 73 | 74 | ::code-preview 75 | --- 76 | class: "[&>div]:*:my-0" 77 | --- 78 | [Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt) 79 | 80 | #code 81 | ```mdc 82 | [Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt) 83 | ``` 84 | :: 85 | 86 | ### Internal links 87 | 88 | For linking within your documentation, use root-relative paths like `/getting-started/installation`. 89 | 90 | ::code-preview 91 | --- 92 | class: "[&>div]:*:my-0" 93 | --- 94 | [Installation](/getting-started/installation) 95 | 96 | #code 97 | ```mdc 98 | [Installation](/getting-started/installation) 99 | ``` 100 | :: 101 | 102 | ## Lists 103 | 104 | Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs. 105 | 106 | ### Unordered 107 | 108 | Use unordered lists for items without a specific sequence. Start each item with a `-` symbol. 109 | 110 | ::code-preview 111 | --- 112 | class: "[&>div]:*:my-0" 113 | --- 114 | - I'm a list item. 115 | - I'm another list item. 116 | - I'm the last list item. 117 | 118 | #code 119 | ```mdc 120 | - I'm a list item. 121 | - I'm another list item. 122 | - I'm the last list item. 123 | ``` 124 | :: 125 | 126 | ### Ordered 127 | 128 | Use ordered lists when item order matters, like steps in a process. Start each item with a number. 129 | 130 | ::code-preview 131 | --- 132 | class: "[&>div]:*:my-0" 133 | --- 134 | 1. I'm a list item. 135 | 2. I'm another list item. 136 | 3. I'm the last list item. 137 | 138 | #code 139 | ```mdc 140 | 1. I'm a list item. 141 | 2. I'm another list item. 142 | 3. I'm the last list item. 143 | ``` 144 | :: 145 | 146 | ### Nested 147 | 148 | Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting. 149 | 150 | ::code-preview 151 | --- 152 | class: "[&>div]:*:my-0" 153 | --- 154 | - I'm a list item. 155 | - I'm a nested list item. 156 | - I'm another nested list item. 157 | - I'm another list item. 158 | 159 | #code 160 | ```mdc 161 | - I'm a list item. 162 | - I'm a nested list item. 163 | - I'm another nested list item. 164 | - I'm another list item. 165 | ``` 166 | :: 167 | 168 | ## Tables 169 | 170 | Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties. 171 | 172 | ::code-preview 173 | --- 174 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 175 | --- 176 | | Prop | Default | Type | 177 | | ------- | --------- | -------- | 178 | | `name` | | `string` | 179 | | `size` | `md` | `string` | 180 | | `color` | `neutral` | `string` | 181 | 182 | #code 183 | ```mdc 184 | | Prop | Default | Type | 185 | |---------|-----------|--------------------------| 186 | | `name` | | `string`{lang="ts-type"} | 187 | | `size` | `md` | `string`{lang="ts-type"} | 188 | | `color` | `neutral` | `string`{lang="ts-type"} | 189 | ``` 190 | :: 191 | 192 | ## Blockquotes 193 | 194 | Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content. 195 | 196 | ### Singleline 197 | 198 | Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes. 199 | 200 | ::code-preview 201 | --- 202 | class: "[&>div]:*:my-0" 203 | --- 204 | > Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. 205 | 206 | #code 207 | ```mdc 208 | > Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. 209 | ``` 210 | :: 211 | 212 | ### Multiline 213 | 214 | Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation. 215 | 216 | ::code-preview 217 | --- 218 | class: "[&>div]:*:my-0" 219 | --- 220 | > Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. 221 | > 222 | > Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. 223 | 224 | #code 225 | ```mdc 226 | > Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. 227 | > 228 | > Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. 229 | ``` 230 | :: 231 | -------------------------------------------------------------------------------- /docs/content/2.essentials/2.code-blocks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Code Blocks 3 | description: Display inline code and code blocks 4 | navigation: 5 | icon: i-lucide-code-xml 6 | --- 7 | 8 | ## Basic 9 | 10 | ### Inline Code 11 | 12 | Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences. 13 | 14 | ::code-preview 15 | --- 16 | class: "[&>div]:*:my-0" 17 | --- 18 | `inline code` 19 | 20 | #code 21 | ```mdc 22 | `inline code` 23 | ``` 24 | :: 25 | 26 | ### Code Blocks 27 | 28 | Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly. 29 | 30 | ::code-preview 31 | --- 32 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 33 | --- 34 | ```ts 35 | export default defineNuxtConfig({ 36 | modules: ['@nuxt/ui-pro'] 37 | }) 38 | ``` 39 | 40 | #code 41 | ````mdc 42 | ```ts 43 | export default defineNuxtConfig({ 44 | modules: ['@nuxt/ui-pro'] 45 | }) 46 | ``` 47 | ```` 48 | :: 49 | 50 | When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name. 51 | Filenames help users understand the code's location and purpose within a project. 52 | 53 | ::code-preview 54 | --- 55 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 56 | --- 57 | ```ts [nuxt.config.ts] 58 | export default defineNuxtConfig({ 59 | modules: ['@nuxt/ui-pro'] 60 | }) 61 | ``` 62 | 63 | #code 64 | ````mdc 65 | ```ts [nuxt.config.ts] 66 | export default defineNuxtConfig({ 67 | modules: ['@nuxt/ui-pro'] 68 | }) 69 | ``` 70 | ```` 71 | :: 72 | 73 | ::tip 74 | Some icons are already defined by default, but you can add more in your `app.config.ts` through the `uiPro.prose.codeIcon` key: 75 | 76 | ```ts [app.config.ts] 77 | export default defineAppConfig({ 78 | uiPro: { 79 | prose: { 80 | codeIcon: { 81 | terminal: 'i-ph-terminal-window-duotone' 82 | } 83 | } 84 | } 85 | }) 86 | ``` 87 | :: 88 | 89 | Every code-block has a built-in copy button that will copy the code to your clipboard. 90 | 91 | ::tip 92 | You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys: 93 | 94 | ```ts [app.config.ts] 95 | export default defineAppConfig({ 96 | ui: { 97 | icons: { 98 | copy: 'i-lucide-copy', 99 | copyCheck: 'i-lucide-copy-check' 100 | } 101 | } 102 | }) 103 | ``` 104 | :: 105 | 106 | #### Highlight Line 107 | 108 | To highlight lines of code, add `{}` around the line numbers you want to highlight. 109 | Line highlighting is useful for focusing users on important parts of code examples. 110 | 111 | ::code-preview 112 | --- 113 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 114 | --- 115 | ```ts [nuxt.config.ts] 116 | export default defineAppConfig({ 117 | ui: { 118 | icons: { 119 | copy: 'i-lucide-copy', 120 | copyCheck: 'i-lucide-copy-check' 121 | } 122 | } 123 | }) 124 | ``` 125 | 126 | #code 127 | ````mdc 128 | ```ts [nuxt.config.ts]{4-5} 129 | export default defineAppConfig({ 130 | ui: { 131 | icons: { 132 | copy: 'i-lucide-copy', 133 | copyCheck: 'i-lucide-copy-check' 134 | } 135 | } 136 | }) 137 | ``` 138 | ```` 139 | :: 140 | 141 | ## Advanced 142 | 143 | ### CodeGroup 144 | 145 | Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers. 146 | 147 | ::code-preview 148 | --- 149 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 150 | --- 151 | :::code-group{.w-full} 152 | ```bash [pnpm] 153 | pnpm add @nuxt/ui-pro@next 154 | ``` 155 | 156 | ```bash [yarn] 157 | yarn add @nuxt/ui-pro@next 158 | ``` 159 | 160 | ```bash [npm] 161 | npm install @nuxt/ui-pro@next 162 | ``` 163 | 164 | ```bash [bun] 165 | bun add @nuxt/ui-pro@next 166 | ``` 167 | ::: 168 | 169 | #code 170 | ````mdc 171 | :::code-group 172 | 173 | ```bash [pnpm] 174 | pnpm add @nuxt/ui-pro@next 175 | ``` 176 | 177 | ```bash [yarn] 178 | yarn add @nuxt/ui-pro@next 179 | ``` 180 | 181 | ```bash [npm] 182 | npm install @nuxt/ui-pro@next 183 | ``` 184 | 185 | ```bash [bun] 186 | bun add @nuxt/ui-pro@next 187 | ``` 188 | 189 | :: 190 | ```` 191 | :: 192 | 193 | ::note{to="#pre"} 194 | Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button. 195 | :: 196 | 197 | ### CodeTree 198 | 199 | Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships. 200 | 201 | ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} 202 | :::code-tree{default-value="app/app.config.ts"} 203 | ```ts [nuxt.config.ts] 204 | export default defineNuxtConfig({ 205 | modules: ['@nuxt/ui-pro'], 206 | 207 | future: { 208 | compatibilityVersion: 4 209 | }, 210 | 211 | css: ['~/assets/css/main.css'] 212 | }) 213 | 214 | ``` 215 | 216 | ```css [app/assets/css/main.css] 217 | @import "tailwindcss"; 218 | @import "@nuxt/ui-pro"; 219 | ``` 220 | 221 | ```ts [app/app.config.ts] 222 | export default defineAppConfig({ 223 | ui: { 224 | colors: { 225 | primary: 'sky', 226 | colors: 'slate' 227 | } 228 | } 229 | }) 230 | ``` 231 | 232 | ```vue [app/app.vue] 233 | 238 | ``` 239 | 240 | ```json [package.json] 241 | { 242 | "name": "nuxt-app", 243 | "private": true, 244 | "type": "module", 245 | "scripts": { 246 | "build": "nuxt build", 247 | "dev": "nuxt dev", 248 | "generate": "nuxt generate", 249 | "preview": "nuxt preview", 250 | "postinstall": "nuxt prepare", 251 | "lint": "eslint .", 252 | "lint:fix": "eslint --fix ." 253 | }, 254 | "dependencies": { 255 | "@iconify-json/lucide": "^1.2.18", 256 | "@nuxt/ui-pro": "3.0.0-alpha.10", 257 | "nuxt": "^3.15.1" 258 | }, 259 | "devDependencies": { 260 | "eslint": "9.20.1", 261 | "typescript": "^5.7.2", 262 | "vue-tsc": "^2.2.0" 263 | } 264 | } 265 | ``` 266 | 267 | ```json [tsconfig.json] 268 | { 269 | "extends": "./.nuxt/tsconfig.json" 270 | } 271 | ``` 272 | 273 | ````md [README.md] 274 | # Nuxt 3 Minimal Starter 275 | 276 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 277 | 278 | ## Setup 279 | 280 | Make sure to install the dependencies: 281 | 282 | ```bash 283 | # npm 284 | npm install 285 | 286 | # pnpm 287 | pnpm install 288 | 289 | # yarn 290 | yarn install 291 | 292 | # bun 293 | bun install 294 | ``` 295 | 296 | ## Development Server 297 | 298 | Start the development server on `http://localhost:3000`: 299 | 300 | ```bash 301 | # npm 302 | npm run dev 303 | 304 | # pnpm 305 | pnpm run dev 306 | 307 | # yarn 308 | yarn dev 309 | 310 | # bun 311 | bun run dev 312 | ``` 313 | 314 | ## Production 315 | 316 | Build the application for production: 317 | 318 | ```bash 319 | # npm 320 | npm run build 321 | 322 | # pnpm 323 | pnpm run build 324 | 325 | # yarn 326 | yarn build 327 | 328 | # bun 329 | bun run build 330 | ``` 331 | 332 | Locally preview production build: 333 | 334 | ```bash 335 | # npm 336 | npm run preview 337 | 338 | # pnpm 339 | pnpm run preview 340 | 341 | # yarn 342 | yarn preview 343 | 344 | # bun 345 | bun run preview 346 | ``` 347 | 348 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 349 | ```` 350 | ::: 351 | :: 352 | 353 | ::note 354 | --- 355 | target: _blank 356 | to: https://ui.nuxt.com/getting-started/typography#codetree 357 | --- 358 | Learn more about the `code-tree` component. 359 | :: 360 | 361 | ### `CodePreview` 362 | 363 | Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results. 364 | Write the code to be previewed in a the `default` slot and the actual code in the `code` slot. 365 | 366 | ::code-preview 367 | --- 368 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 369 | label: Preview 370 | --- 371 | :::code-preview 372 | --- 373 | class: "[&>div]:*:my-0" 374 | --- 375 | `inline code` 376 | 377 | #code 378 | ```mdc 379 | `inline code` 380 | ``` 381 | ::: 382 | 383 | #code 384 | ````mdc 385 | ::code-preview 386 | `inline code` 387 | 388 | #code 389 | ```mdc 390 | `inline code` 391 | ``` 392 | :: 393 | ```` 394 | :: 395 | 396 | ### `CodeCollapse` 397 | 398 | Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability. 399 | 400 | ::code-preview 401 | --- 402 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 403 | --- 404 | :::code-collapse{class="[&>div]:my-0"} 405 | ```css [main.css] 406 | @import "tailwindcss"; 407 | @import "@nuxt/ui-pro"; 408 | 409 | @theme { 410 | --font-sans: 'Public Sans', sans-serif; 411 | 412 | --breakpoint-3xl: 1920px; 413 | 414 | --color-green-50: #EFFDF5; 415 | --color-green-100: #D9FBE8; 416 | --color-green-200: #B3F5D1; 417 | --color-green-300: #75EDAE; 418 | --color-green-400: #00DC82; 419 | --color-green-500: #00C16A; 420 | --color-green-600: #00A155; 421 | --color-green-700: #007F45; 422 | --color-green-800: #016538; 423 | --color-green-900: #0A5331; 424 | --color-green-950: #052E16; 425 | } 426 | ``` 427 | ::: 428 | 429 | #code 430 | ````mdc 431 | ::code-collapse 432 | 433 | ```css [main.css] 434 | @import "tailwindcss"; 435 | @import "@nuxt/ui-pro"; 436 | 437 | @theme { 438 | --font-sans: 'Public Sans', sans-serif; 439 | 440 | --breakpoint-3xl: 1920px; 441 | 442 | --color-green-50: #EFFDF5; 443 | --color-green-100: #D9FBE8; 444 | --color-green-200: #B3F5D1; 445 | --color-green-300: #75EDAE; 446 | --color-green-400: #00DC82; 447 | --color-green-500: #00C16A; 448 | --color-green-600: #00A155; 449 | --color-green-700: #007F45; 450 | --color-green-800: #016538; 451 | --color-green-900: #0A5331; 452 | --color-green-950: #052E16; 453 | } 454 | ``` 455 | 456 | :: 457 | ```` 458 | :: 459 | -------------------------------------------------------------------------------- /docs/content/2.essentials/3.prose-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Prose Components 3 | description: Components to help you structure your content. 4 | navigation: 5 | icon: i-lucide-component 6 | --- 7 | 8 | ### Accordion 9 | 10 | Use `accordion` and `accordion-item` to create collapsible content sections. Accordions are useful for organizing FAQs, expandable details, or grouped information in an interactive way. 11 | 12 | ::code-preview 13 | --- 14 | class: "[&>div]:*:my-0" 15 | --- 16 | :::accordion 17 | ::::accordion-item 18 | --- 19 | icon: i-lucide-circle-help 20 | label: What are the main considerations when upgrading to Nuxt UI v3? 21 | --- 22 | The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment. 23 | :::: 24 | 25 | ::::accordion-item 26 | --- 27 | icon: i-lucide-circle-help 28 | label: Is Nuxt UI v3 compatible with standalone Vue projects? 29 | --- 30 | Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started. 31 | :::: 32 | 33 | ::::accordion-item{icon="i-lucide-circle-help" label="What about Nuxt UI Pro?"} 34 | We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components. 35 | :::: 36 | ::: 37 | 38 | #code 39 | ```mdc 40 | ::accordion 41 | 42 | :::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"} 43 | The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment. 44 | ::: 45 | 46 | :::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"} 47 | Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started. 48 | ::: 49 | 50 | :::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"} 51 | We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components. 52 | ::: 53 | 54 | :: 55 | ``` 56 | :: 57 | 58 | ### Badge 59 | 60 | Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content. 61 | 62 | ::code-preview 63 | --- 64 | label: Preview 65 | --- 66 | :::badge 67 | **v3.0.0-alpha.10** 68 | ::: 69 | 70 | #code 71 | ```mdc 72 | ::badge 73 | **v3.0.0-alpha.10** 74 | :: 75 | ``` 76 | :: 77 | 78 | ### Callout 79 | 80 | Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out. 81 | 82 | Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles. 83 | 84 | ::code-preview 85 | --- 86 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 87 | --- 88 | :::callout 89 | This is a `callout` with full **markdown** support. 90 | ::: 91 | 92 | #code 93 | ```mdc 94 | ::callout 95 | This is a `callout` with full **markdown** support. 96 | :: 97 | ``` 98 | :: 99 | 100 | ::code-preview 101 | :::div{.flex.flex-col.gap-4.w-full} 102 | ::::note{.w-full.my-0} 103 | Here's some additional information for you. 104 | :::: 105 | 106 | ::::tip{.w-full.my-0} 107 | Here's a helpful suggestion. 108 | :::: 109 | 110 | ::::warning{.w-full.my-0} 111 | Be careful with this action as it might have unexpected results. 112 | :::: 113 | 114 | ::::caution{.w-full.my-0} 115 | This action cannot be undone. 116 | :::: 117 | ::: 118 | 119 | #code 120 | ```mdc 121 | ::note 122 | Here's some additional information. 123 | :: 124 | 125 | ::tip 126 | Here's a helpful suggestion. 127 | :: 128 | 129 | ::warning 130 | Be careful with this action as it might have unexpected results. 131 | :: 132 | 133 | ::caution 134 | This action cannot be undone. 135 | :: 136 | ``` 137 | :: 138 | 139 | ### Card 140 | 141 | Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers. 142 | 143 | Customize with `title`, `icon`, and `color` props. Cards can also act as links using `` properties for navigation. 144 | 145 | ::code-preview 146 | --- 147 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 148 | --- 149 | :::card 150 | --- 151 | icon: i-simple-icons-github 152 | target: _blank 153 | title: Dashboard 154 | to: https://github.com/nuxt-ui-pro/dashboard 155 | --- 156 | A dashboard with multi-column layout. 157 | ::: 158 | 159 | #code 160 | ```mdc 161 | ::card 162 | --- 163 | title: Dashboard 164 | icon: i-simple-icons-github 165 | to: https://github.com/nuxt-ui-pro/dashboard 166 | target: _blank 167 | --- 168 | A dashboard with multi-column layout. 169 | :: 170 | ``` 171 | :: 172 | 173 | ### CardGroup 174 | 175 | Use `card-group` to arrange cards in a grid layout. `card-group` is ideal for displaying collections of cards in a structured, visually appealing, and responsive grid. 176 | 177 | ::code-preview 178 | :::card-group{.w-full} 179 | ::::card 180 | --- 181 | icon: i-simple-icons-github 182 | target: _blank 183 | title: Dashboard 184 | to: https://github.com/nuxt-ui-pro/dashboard 185 | --- 186 | A dashboard with multi-column layout. 187 | :::: 188 | 189 | ::::card 190 | --- 191 | icon: i-simple-icons-github 192 | target: _blank 193 | title: SaaS 194 | to: https://github.com/nuxt-ui-pro/saas 195 | --- 196 | A template with landing, pricing, docs and blog. 197 | :::: 198 | 199 | ::::card 200 | --- 201 | icon: i-simple-icons-github 202 | target: _blank 203 | title: Docs 204 | to: https://github.com/nuxt-ui-pro/docs 205 | --- 206 | A documentation with `@nuxt/content`. 207 | :::: 208 | 209 | ::::card 210 | --- 211 | icon: i-simple-icons-github 212 | target: _blank 213 | title: Landing 214 | to: https://github.com/nuxt-ui-pro/landing 215 | --- 216 | A landing page you can use as starting point. 217 | :::: 218 | ::: 219 | 220 | #code 221 | ```mdc 222 | ::card-group 223 | 224 | ::card 225 | --- 226 | title: Dashboard 227 | icon: i-simple-icons-github 228 | to: https://github.com/nuxt-ui-pro/dashboard 229 | target: _blank 230 | --- 231 | A dashboard with multi-column layout. 232 | :: 233 | 234 | ::card 235 | --- 236 | title: SaaS 237 | icon: i-simple-icons-github 238 | to: https://github.com/nuxt-ui-pro/saas 239 | target: _blank 240 | --- 241 | A template with landing, pricing, docs and blog. 242 | :: 243 | 244 | ::card 245 | --- 246 | title: Docs 247 | icon: i-simple-icons-github 248 | to: https://github.com/nuxt-ui-pro/docs 249 | target: _blank 250 | --- 251 | A documentation with `@nuxt/content`. 252 | :: 253 | 254 | ::card 255 | --- 256 | title: Landing 257 | icon: i-simple-icons-github 258 | to: https://github.com/nuxt-ui-pro/landing 259 | target: _blank 260 | --- 261 | A landing page you can use as starting point. 262 | :: 263 | 264 | :: 265 | ``` 266 | :: 267 | 268 | ### Collapsible 269 | 270 | Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information. 271 | 272 | ::code-preview 273 | --- 274 | class: "[&>div]:*:w-full" 275 | --- 276 | :::collapsible 277 | | Prop | Default | Type | 278 | | ------- | --------- | -------- | 279 | | `name` | | `string` | 280 | | `size` | `md` | `string` | 281 | | `color` | `neutral` | `string` | 282 | ::: 283 | 284 | #code 285 | ```mdc 286 | ::collapsible 287 | 288 | | Prop | Default | Type | 289 | |---------|-----------|--------------------------| 290 | | `name` | | `string`{lang="ts-type"} | 291 | | `size` | `md` | `string`{lang="ts-type"} | 292 | | `color` | `neutral` | `string`{lang="ts-type"} | 293 | 294 | :: 295 | ``` 296 | :: 297 | 298 | ### Field 299 | 300 | Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options. 301 | 302 | ::code-preview 303 | :::field{.w-full required name="name" type="string"} 304 | The `description` can be set as prop or in the default slot with full **markdown** support. 305 | ::: 306 | 307 | #code 308 | ```mdc 309 | ::field{name="name" type="string" required} 310 | The `description` can be set as prop or in the default slot with full **markdown** support. 311 | :: 312 | ``` 313 | :: 314 | 315 | ### FieldGroup 316 | 317 | Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties. 318 | 319 | ::code-preview 320 | :::field-group 321 | ::::field{name="analytics" type="boolean"} 322 | Default to `false` - Enables analytics for your project (coming soon). 323 | :::: 324 | 325 | ::::field{name="blob" type="boolean"} 326 | Default to `false` - Enables blob storage to store static assets, such as images, videos and more. 327 | :::: 328 | 329 | ::::field{name="cache" type="boolean"} 330 | Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` 331 | :::: 332 | 333 | ::::field{name="database" type="boolean"} 334 | Default to `false` - Enables SQL database to store your application's data. 335 | :::: 336 | ::: 337 | 338 | #code 339 | ```mdc 340 | ::field-group 341 | ::field{name="analytics" type="boolean"} 342 | Default to `false` - Enables analytics for your project (coming soon). 343 | :: 344 | 345 | ::field{name="blob" type="boolean"} 346 | Default to `false` - Enables blob storage to store static assets, such as images, videos and more. 347 | :: 348 | 349 | ::field{name="cache" type="boolean"} 350 | Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` 351 | :: 352 | 353 | ::field{name="database" type="boolean"} 354 | Default to `false` - Enables SQL database to store your application's data. 355 | :: 356 | :: 357 | ``` 358 | :: 359 | 360 | ### Icon 361 | 362 | Use `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation. 363 | 364 | ::code-preview 365 | :icon{name="i-simple-icons-nuxtdotjs"} 366 | 367 | 368 | 369 | #code 370 | ```mdc 371 | :icon{name="i-simple-icons-nuxtdotjs"} 372 | ``` 373 | :: 374 | 375 | ### Kbd 376 | 377 | Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references. 378 | 379 | ::code-preview 380 | --- 381 | class: "[&>div]:*:my-0" 382 | --- 383 | `` `` 384 | 385 | #code 386 | ```mdc 387 | :kbd{value="meta"} :kbd{value="K"} 388 | ``` 389 | :: 390 | 391 | ### Tabs 392 | 393 | Use `tabs` and `tabs-item` to organize content into tabbed interfaces. Tabs are effective for separating content into logical sections, improving content discoverability and organization. 394 | 395 | ::code-preview 396 | --- 397 | class: "[&>div]:*:my-0" 398 | --- 399 | :::tabs{.w-full} 400 | ::::tabs-item{icon="i-lucide-code" label="Code"} 401 | ```mdc 402 | ::callout 403 | Lorem velit voluptate ex reprehenderit ullamco et culpa. 404 | :: 405 | ``` 406 | :::: 407 | 408 | ::::tabs-item{icon="i-lucide-eye" label="Preview"} 409 | :::::callout 410 | Lorem velit voluptate ex reprehenderit ullamco et culpa. 411 | ::::: 412 | :::: 413 | ::: 414 | 415 | #code 416 | ````mdc 417 | ::tabs 418 | 419 | :::tabs-item{label="Code" icon="i-lucide-code"} 420 | 421 | ```mdc 422 | ::callout 423 | Lorem velit voluptate ex reprehenderit ullamco et culpa. 424 | :: 425 | ``` 426 | 427 | ::: 428 | 429 | :::tabs-item{label="Preview" icon="i-lucide-eye"} 430 | 431 | ::::callout 432 | Lorem velit voluptate ex reprehenderit ullamco et culpa. 433 | :::: 434 | 435 | ::: 436 | 437 | :: 438 | ```` 439 | :: 440 | 441 | ### Steps 442 | 443 | Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials. 444 | 445 | Set the `level` prop to define the heading level to include in the step-by-step guide. 446 | 447 | ::code-preview 448 | --- 449 | class: "[&>div]:*:w-full" 450 | --- 451 | :::steps{level="4"} 452 | #### Add the Nuxt UI Pro module in your `nuxt.config.ts` 453 | 454 | ```ts [nuxt.config.ts] 455 | export default defineNuxtConfig({ 456 | modules: ['@nuxt/ui-pro'] 457 | }) 458 | ``` 459 | 460 | #### Import Tailwind CSS and Nuxt UI Pro in your CSS 461 | 462 | ```css [assets/css/main.css] 463 | @import "tailwindcss"; 464 | @import "@nuxt/ui-pro"; 465 | ``` 466 | ::: 467 | 468 | #code 469 | ````mdc 470 | ::steps{level="4"} 471 | 472 | #### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"} 473 | 474 | ```ts [nuxt.config.ts] 475 | export default defineNuxtConfig({ 476 | modules: ['@nuxt/ui-pro'] 477 | }) 478 | ``` 479 | 480 | #### Import Tailwind CSS and Nuxt UI Pro in your CSS 481 | 482 | ```css [assets/css/main.css] 483 | @import "tailwindcss"; 484 | @import "@nuxt/ui-pro"; 485 | ``` 486 | 487 | :: 488 | ```` 489 | :: 490 | -------------------------------------------------------------------------------- /docs/content/2.essentials/4.images-embeds.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Images and Embeds 3 | description: Add image, video, and other HTML elements 4 | navigation: 5 | icon: i-lucide-image 6 | --- 7 | 8 | ## Image 9 | 10 | ### Using Markdown 11 | 12 | Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display. 13 | 14 | ::code-preview 15 | ![Nuxt Social Image](https://nuxt.com/new-social.jpg) 16 | 17 | #code 18 | ```mdc 19 | ![Nuxt Social Image](https://nuxt.com/new-social.jpg) 20 | ``` 21 | :: 22 | 23 | Or with your local images 24 | 25 | ::code-preview 26 | ![Social Card](/social-card.png) 27 | 28 | #code 29 | ```mdc 30 | ![Social Card](/social-card.png) 31 | ``` 32 | :: 33 | 34 | ::note 35 | If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `` component will be used instead of the native `img` tag. 36 | :: 37 | 38 | ### Using Embeds 39 | 40 | Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling. 41 | 42 | ::code-preview 43 | ![Nuxt Social Image](https://nuxt.com/new-social.jpg){height="150"} 44 | 45 | 46 | 47 | #code 48 | ```mdc 49 | :img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"} 50 | ``` 51 | :: 52 | 53 | ## Embeds and HTML elements 54 | 55 | Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content. 56 | 57 | ::code-preview 58 | --- 59 | class: "[&>div]:*:w-full" 60 | --- 61 | :iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"} 62 | 63 | 64 | #code 65 | ```mdc 66 | :iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"} 67 | ``` 68 | :: 69 | -------------------------------------------------------------------------------- /docs/content/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | seo: 3 | title: Nuxt Codemirror 4 | description: Nuxt Codemirror Module is a module for Nuxt 3 that allows you to use Codemirror in your project. 5 | --- 6 | 7 | ::u-page-hero 8 | --- 9 | orientation: horizontal 10 | --- 11 | :::prose-pre 12 | --- 13 | code: npx nuxi module add nuxt-codemirror 14 | filename: Terminal 15 | --- 16 | ```bash 17 | npx nuxi module add nuxt-codemirror 18 | ``` 19 | ::: 20 | 21 | #title 22 | Build with the Nuxt Codemirror Module 23 | 24 | #description 25 | Nuxt Codemirror Module is a module for Nuxt 3 that allows you to use Codemirror in your project. 26 | 27 | #links 28 | :::u-button 29 | --- 30 | size: xl 31 | to: /getting-started 32 | trailing-icon: i-lucide-arrow-right 33 | --- 34 | Get started 35 | ::: 36 | 37 | :::u-button 38 | --- 39 | color: neutral 40 | icon: i-simple-icons-github 41 | size: xl 42 | target: _blank 43 | to: https://github.com/nuxt-ui-pro/docs 44 | variant: subtle 45 | --- 46 | Use this template 47 | ::: 48 | :: 49 | 50 | ::u-page-section 51 | #title 52 | All-in-one documentation template 53 | 54 | #links 55 | :::u-button 56 | --- 57 | color: neutral 58 | size: lg 59 | target: _blank 60 | to: https://ui.nuxt.com/getting-started/installation/pro/nuxt 61 | trailingIcon: i-lucide-arrow-right 62 | variant: subtle 63 | --- 64 | Discover Nuxt UI Pro v3 65 | ::: 66 | 67 | #features 68 | :::u-page-feature 69 | --- 70 | icon: i-simple-icons-nuxt 71 | target: _blank 72 | to: https://nuxt.com 73 | --- 74 | #title 75 | Nuxt 3 76 | 77 | #description 78 | Powered by Nuxt 3 for optimal performances and SEO. 79 | ::: 80 | 81 | :::u-page-feature 82 | --- 83 | icon: i-simple-icons-markdown 84 | target: _blank 85 | to: https://content.nuxt.com 86 | --- 87 | #title 88 | Markdown 89 | 90 | #description 91 | Write your pages with MDC thanks to Nuxt Content. 92 | ::: 93 | 94 | :::u-page-feature 95 | --- 96 | icon: i-lucide-sparkles 97 | target: _blank 98 | to: https://ui.nuxt.com 99 | --- 100 | #title 101 | Nuxt UI v3 102 | 103 | #description 104 | Offers a very large set of full customizable components. 105 | ::: 106 | 107 | :::u-page-feature 108 | --- 109 | icon: i-simple-icons-typescript 110 | target: _blank 111 | to: https://www.typescriptlang.org 112 | --- 113 | #title 114 | TypeScript 115 | 116 | #description 117 | A fully typed development experience. 118 | ::: 119 | 120 | :::u-page-feature 121 | --- 122 | icon: i-simple-icons-nuxtdotjs 123 | target: _blank 124 | to: https://content.nuxt.com/docs/studio 125 | --- 126 | #title 127 | Nuxt Studio 128 | 129 | #description 130 | Supported by Nuxt Studio for fast updates and previews. 131 | ::: 132 | 133 | :::u-page-feature 134 | --- 135 | icon: i-lucide-search 136 | target: _blank 137 | to: https://ui.nuxt.com/components/content-search 138 | --- 139 | #title 140 | Search 141 | 142 | #description 143 | A full-text search modal powered by Fuse.js. 144 | ::: 145 | :: 146 | 147 | ::u-page-section 148 | :::u-page-c-t-a 149 | --- 150 | links: 151 | - label: Buy now 152 | to: https://ui.nuxt.com/pro/purchase 153 | target: _blank 154 | icon: i-lucide-shopping-cart 155 | color: neutral 156 | - label: License 157 | to: https://ui.nuxt.com/getting-started/license 158 | trailingIcon: i-lucide-circle-help 159 | target: _blank 160 | color: neutral 161 | variant: subtle 162 | description: Nuxt UI Pro is free in development, but you need a license to use 163 | it in production. 164 | title: Start with Nuxt UI Pro today! 165 | variant: subtle 166 | --- 167 | ::: 168 | :: 169 | -------------------------------------------------------------------------------- /docs/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import withNuxt from './.nuxt/eslint.config.mjs' 3 | 4 | export default withNuxt( 5 | // Your custom configs here 6 | ) 7 | -------------------------------------------------------------------------------- /docs/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | modules: [ 4 | '@nuxt/eslint', 5 | '@nuxt/image', 6 | '@nuxt/ui-pro', 7 | '@nuxt/content', 8 | 'nuxt-og-image', 9 | 'nuxt-llms', 10 | ], 11 | 12 | devtools: { 13 | enabled: true, 14 | }, 15 | 16 | css: ['~/assets/css/main.css'], 17 | 18 | content: { 19 | build: { 20 | markdown: { 21 | toc: { 22 | searchDepth: 1, 23 | }, 24 | }, 25 | }, 26 | }, 27 | 28 | future: { 29 | compatibilityVersion: 4, 30 | }, 31 | 32 | compatibilityDate: '2024-07-11', 33 | 34 | nitro: { 35 | prerender: { 36 | routes: [ 37 | '/', 38 | ], 39 | crawlLinks: true, 40 | }, 41 | }, 42 | 43 | eslint: { 44 | config: { 45 | stylistic: { 46 | commaDangle: 'never', 47 | braceStyle: '1tbs', 48 | }, 49 | }, 50 | }, 51 | 52 | icon: { 53 | provider: 'iconify', 54 | }, 55 | 56 | llms: { 57 | domain: 'https://docs-template.nuxt.dev/', 58 | title: 'Nuxt UI Pro - Docs template', 59 | description: 'A template for building documentation with Nuxt UI Pro and Nuxt Content', 60 | full: { 61 | title: 'Nuxt UI Pro - Docs template Full Documentation', 62 | description: 'This is the full documentation for the Nuxt UI Pro - Docs template', 63 | }, 64 | sections: [ 65 | { 66 | title: 'Getting Started', 67 | contentCollection: 'docs', 68 | contentFilters: [ 69 | { field: 'path', operator: 'LIKE', value: '/getting-started%' }, 70 | ], 71 | }, 72 | { 73 | title: 'Essentials', 74 | contentCollection: 'docs', 75 | contentFilters: [ 76 | { field: 'path', operator: 'LIKE', value: '/essentials%' }, 77 | ], 78 | }, 79 | ], 80 | }, 81 | }) 82 | -------------------------------------------------------------------------------- /docs/nuxt.schema.ts: -------------------------------------------------------------------------------- 1 | import { field, group } from '@nuxt/content/preview' 2 | 3 | export default defineNuxtSchema({ 4 | appConfig: { 5 | ui: group({ 6 | title: 'UI', 7 | description: 'UI Customization.', 8 | icon: 'i-mdi-palette-outline', 9 | fields: { 10 | colors: group({ 11 | title: 'Colors', 12 | description: 'Manage main colors of your application', 13 | icon: 'i-mdi-palette-outline', 14 | fields: { 15 | primary: field({ 16 | type: 'string', 17 | title: 'Primary', 18 | description: 'Primary color of your UI.', 19 | icon: 'i-mdi-palette-outline', 20 | default: 'green', 21 | required: ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'], 22 | }), 23 | neutral: field({ 24 | type: 'string', 25 | title: 'Neutral', 26 | description: 'Neutral color of your UI.', 27 | icon: 'i-mdi-palette-outline', 28 | default: 'slate', 29 | required: ['slate', 'gray', 'zinc', 'neutral', 'stone'], 30 | }), 31 | }, 32 | }), 33 | icons: group({ 34 | title: 'Icons', 35 | description: 'Manage icons used in the application.', 36 | icon: 'i-mdi-application-settings-outline', 37 | fields: { 38 | search: field({ 39 | type: 'icon', 40 | title: 'Search Bar', 41 | description: 'Icon to display in the search bar.', 42 | icon: 'i-mdi-magnify', 43 | default: 'i-lucide-search', 44 | }), 45 | dark: field({ 46 | type: 'icon', 47 | title: 'Dark mode', 48 | description: 'Icon of color mode button for dark mode.', 49 | icon: 'i-mdi-moon-waning-crescent', 50 | default: 'i-lucide-moon', 51 | }), 52 | light: field({ 53 | type: 'icon', 54 | title: 'Light mode', 55 | description: 'Icon of color mode button for light mode.', 56 | icon: 'i-mdi-white-balance-sunny', 57 | default: 'i-lucide-sun', 58 | }), 59 | external: field({ 60 | type: 'icon', 61 | title: 'External Link', 62 | description: 'Icon for external link.', 63 | icon: 'i-mdi-arrow-top-right', 64 | default: 'i-lucide-external-link', 65 | }), 66 | chevron: field({ 67 | type: 'icon', 68 | title: 'Chevron', 69 | description: 'Icon for chevron.', 70 | icon: 'i-mdi-chevron-down', 71 | default: 'i-lucide-chevron-down', 72 | }), 73 | hash: field({ 74 | type: 'icon', 75 | title: 'Hash', 76 | description: 'Icon for hash anchors.', 77 | icon: 'i-ph-hash', 78 | default: 'i-lucide-hash', 79 | }), 80 | }, 81 | }), 82 | }, 83 | }), 84 | seo: group({ 85 | title: 'SEO', 86 | description: 'SEO configuration.', 87 | icon: 'i-ph-app-window', 88 | fields: { 89 | siteName: field({ 90 | type: 'string', 91 | title: 'Site Name', 92 | description: 'Name used in ogSiteName and used as second part of your page title (My page title - Nuxt UI Pro).', 93 | icon: 'i-mdi-web', 94 | default: [], 95 | }), 96 | }, 97 | }), 98 | header: group({ 99 | title: 'Header', 100 | description: 'Header configuration.', 101 | icon: 'i-mdi-page-layout-header', 102 | fields: { 103 | title: field({ 104 | type: 'string', 105 | title: 'Title', 106 | description: 'Title to display in the header.', 107 | icon: 'i-mdi-format-title', 108 | default: '', 109 | }), 110 | to: field({ 111 | type: 'string', 112 | title: 'To', 113 | description: 'URL to redirect to when the title is clicked.', 114 | icon: 'i-mdi-link-variant', 115 | default: '', 116 | }), 117 | logo: group({ 118 | title: 'Logo', 119 | description: 'Header logo configuration.', 120 | icon: 'i-mdi-image-filter-center-focus-strong-outline', 121 | fields: { 122 | light: field({ 123 | type: 'media', 124 | title: 'Light Mode Logo', 125 | description: 'Pick an image from your gallery.', 126 | icon: 'i-mdi-white-balance-sunny', 127 | default: '', 128 | }), 129 | dark: field({ 130 | type: 'media', 131 | title: 'Dark Mode Logo', 132 | description: 'Pick an image from your gallery.', 133 | icon: 'i-mdi-moon-waning-crescent', 134 | default: '', 135 | }), 136 | alt: field({ 137 | type: 'string', 138 | title: 'Alt', 139 | description: 'Alt to display for accessibility.', 140 | icon: 'i-mdi-alphabet-latin', 141 | default: '', 142 | }), 143 | }, 144 | }), 145 | search: field({ 146 | type: 'boolean', 147 | title: 'Search Bar', 148 | description: 'Hide or display the search bar.', 149 | icon: 'i-mdi-magnify', 150 | default: true, 151 | }), 152 | colorMode: field({ 153 | type: 'boolean', 154 | title: 'Color Mode', 155 | description: 'Hide or display the color mode button in your header.', 156 | icon: 'i-mdi-moon-waning-crescent', 157 | default: true, 158 | }), 159 | links: field({ 160 | type: 'array', 161 | title: 'Links', 162 | description: 'Array of link object displayed in header.', 163 | icon: 'i-mdi-link-variant', 164 | default: [], 165 | }), 166 | }, 167 | }), 168 | footer: group({ 169 | title: 'Footer', 170 | description: 'Footer configuration.', 171 | icon: 'i-mdi-page-layout-footer', 172 | fields: { 173 | credits: field({ 174 | type: 'string', 175 | title: 'Footer credits section', 176 | description: 'Text to display as credits in the footer.', 177 | icon: 'i-mdi-circle-edit-outline', 178 | default: '', 179 | }), 180 | colorMode: field({ 181 | type: 'boolean', 182 | title: 'Color Mode', 183 | description: 'Hide or display the color mode button in the footer.', 184 | icon: 'i-mdi-moon-waning-crescent', 185 | default: false, 186 | }), 187 | links: field({ 188 | type: 'array', 189 | title: 'Links', 190 | description: 'Array of link object displayed in footer.', 191 | icon: 'i-mdi-link-variant', 192 | default: [], 193 | }), 194 | }, 195 | }), 196 | toc: group({ 197 | title: 'Table of contents', 198 | description: 'TOC configuration.', 199 | icon: 'i-mdi-table-of-contents', 200 | fields: { 201 | title: field({ 202 | type: 'string', 203 | title: 'Title', 204 | description: 'Text to display as title of the main toc.', 205 | icon: 'i-mdi-format-title', 206 | default: '', 207 | }), 208 | bottom: group({ 209 | title: 'Bottom', 210 | description: 'Bottom TOC configuration.', 211 | icon: 'i-mdi-table-of-contents', 212 | fields: { 213 | title: field({ 214 | type: 'string', 215 | title: 'Title', 216 | description: 'Text to display as title of the bottom toc.', 217 | icon: 'i-mdi-format-title', 218 | default: '', 219 | }), 220 | edit: field({ 221 | type: 'string', 222 | title: 'Edit Page Link', 223 | description: 'URL of your repository content folder.', 224 | icon: 'i-ph-note-pencil', 225 | default: '', 226 | }), 227 | links: field({ 228 | type: 'array', 229 | title: 'Links', 230 | description: 'Array of link object displayed in bottom toc.', 231 | icon: 'i-mdi-link-variant', 232 | default: [], 233 | }), 234 | }, 235 | }), 236 | }, 237 | }), 238 | }, 239 | }) 240 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-ui-pro-template-docs", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare", 11 | "lint": "eslint .", 12 | "typecheck": "nuxt typecheck" 13 | }, 14 | "dependencies": { 15 | "@iconify-json/lucide": "^1.2.32", 16 | "@iconify-json/simple-icons": "^1.2.29", 17 | "@iconify-json/vscode-icons": "^1.2.16", 18 | "@nuxt/content": "^3.4.0", 19 | "@nuxt/image": "^1.10.0", 20 | "@nuxt/ui-pro": "^3.0.1", 21 | "nuxt": "^3.16.1", 22 | "nuxt-llms": "0.1.0", 23 | "nuxt-og-image": "^5.0.5" 24 | }, 25 | "devDependencies": { 26 | "@nuxt/eslint": "^1.2.0", 27 | "eslint": "^9.22.0", 28 | "typescript": "^5.8.2", 29 | "vue-tsc": "^2.2.2" 30 | }, 31 | "pnpm": { 32 | "onlyBuiltDependencies": [ 33 | "better-sqlite3" 34 | ], 35 | "ignoredBuiltDependencies": [ 36 | "@parcel/watcher", 37 | "esbuild", 38 | "vue-demi", 39 | "workerd" 40 | ] 41 | }, 42 | "packageManager": "pnpm@10.6.5" 43 | } 44 | -------------------------------------------------------------------------------- /docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThimoDEV/nuxt-codemirror/2eca6f25aa61f71ac22c11ac91588face5dcefe6/docs/public/favicon.ico -------------------------------------------------------------------------------- /docs/public/social-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThimoDEV/nuxt-codemirror/2eca6f25aa61f71ac22c11ac91588face5dcefe6/docs/public/social-card.png -------------------------------------------------------------------------------- /docs/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "github>nuxt/renovate-config-nuxt" 4 | ], 5 | "lockFileMaintenance": { 6 | "enabled": true 7 | }, 8 | "ignoreDeps": [ 9 | "vue-tsc" 10 | ], 11 | "baseBranches": ["v1", "main"], 12 | "packageRules": [{ 13 | "matchDepTypes": ["resolutions"], 14 | "enabled": false 15 | }], 16 | "postUpdateOptions": ["pnpmDedupe"] 17 | } 18 | -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { createConfigForNuxt } from '@nuxt/eslint-config/flat' 3 | 4 | // Run `npx @eslint/config-inspector` to inspect the resolved config interactively 5 | export default createConfigForNuxt({ 6 | features: { 7 | // Rules for module authors 8 | tooling: true, 9 | // Rules for formatting 10 | stylistic: true, 11 | }, 12 | dirs: { 13 | src: [ 14 | './playground', 15 | ], 16 | }, 17 | }) 18 | .append( 19 | // your custom flat config here... 20 | ) 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-codemirror", 3 | "version": "0.0.16", 4 | "description": "Nuxt codemirror module", 5 | "repository": "https://github.com/ThimoDEV/nuxt-codemirror", 6 | "homepage": "https://github.com/ThimoDEV/nuxt-codemirror#readme", 7 | "license": "MIT", 8 | "type": "module", 9 | "author": { 10 | "name": "ThimoDEV", 11 | "url": "https://github.com/ThimoDEV" 12 | }, 13 | "exports": { 14 | ".": { 15 | "types": "./dist/types.d.ts", 16 | "import": "./dist/module.mjs", 17 | "require": "./dist/module.cjs" 18 | } 19 | }, 20 | "main": "./dist/module.cjs", 21 | "types": "./dist/types.d.ts", 22 | "files": [ 23 | "dist" 24 | ], 25 | "scripts": { 26 | "prepack": "nuxt-module-build build", 27 | "dev": "nuxi dev playground", 28 | "dev:build": "nuxi build playground", 29 | "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground", 30 | "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags", 31 | "client:build": "nuxt prepare client && nuxi generate client", 32 | "client:dev": "nuxi dev client --port 3300", 33 | "docs": "nuxt dev docs", 34 | "docs:build": "nuxt build docs", 35 | "docs:prepare": "nuxt prepare docs", 36 | "docs:dev": "nuxt dev docs", 37 | "docs:preview": "nuxt preview docs", 38 | "docs:start": "node .output/server/index.mjs", 39 | "lint": "eslint .", 40 | "lint:fix": "eslint --fix .", 41 | "test": "vitest run", 42 | "test:watch": "vitest watch", 43 | "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit" 44 | }, 45 | "dependencies": { 46 | "@babel/runtime": "^7.26.10", 47 | "@codemirror/autocomplete": "^6.18.6", 48 | "@codemirror/commands": "^6.8.0", 49 | "@codemirror/language": "^6.10.8", 50 | "@codemirror/lint": "^6.8.4", 51 | "@codemirror/search": "^6.5.10", 52 | "@codemirror/state": "6.5.2", 53 | "@codemirror/theme-one-dark": "^6.1.2", 54 | "@codemirror/view": "6.36.4", 55 | "@nuxt/kit": "^3.16.1" 56 | }, 57 | "devDependencies": { 58 | "@nuxt/devtools": "^2.2.1", 59 | "@nuxt/devtools-ui-kit": "^1.6.4", 60 | "@nuxt/eslint-config": "^1.2.0", 61 | "@nuxt/module-builder": "^0.8.4", 62 | "@nuxt/schema": "^3.16.0", 63 | "@nuxt/test-utils": "^3.17.2", 64 | "@types/node": "^22.13.10", 65 | "changelogen": "^0.6.1", 66 | "eslint": "^9.22.0", 67 | "nuxt": "^3.16.0", 68 | "typescript": "5.3.2", 69 | "vitest": "^3.0.8", 70 | "vue-tsc": "2.0.29" 71 | }, 72 | "resolutions": { 73 | "vue-tsc": "2.2.2" 74 | }, 75 | "keywords": [ 76 | "nuxt", 77 | "codemirror", 78 | "vue" 79 | ], 80 | "packageManager": "pnpm@10.6.5" 81 | } 82 | -------------------------------------------------------------------------------- /playground/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /playground/app.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 60 | -------------------------------------------------------------------------------- /playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | modules: ['../src/module'], 3 | devtools: { enabled: true }, 4 | devServer: { 5 | port: 4000, 6 | }, 7 | compatibilityDate: '2024-07-24', 8 | nuxtCodemirror: { 9 | devtools: true, 10 | }, 11 | }, 12 | ) 13 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "nuxt-codemirror-playground", 4 | "type": "module", 5 | "scripts": { 6 | "dev": "nuxi dev", 7 | "build": "nuxi build", 8 | "generate": "nuxi generate" 9 | }, 10 | "dependencies": { 11 | "@codemirror/autocomplete": "^6.18.6", 12 | "@codemirror/commands": "^6.8.0", 13 | "@codemirror/lang-javascript": "^6.2.3", 14 | "@codemirror/language": "^6.10.8", 15 | "@codemirror/lint": "^6.8.4", 16 | "@codemirror/search": "^6.5.10", 17 | "@codemirror/state": "6.5.2", 18 | "@codemirror/view": "6.36.4", 19 | "@nuxt/kit": "^3.16.0", 20 | "@uiw/codemirror-extensions-line-numbers-relative": "^4.23.10", 21 | "@uiw/codemirror-theme-okaidia": "^4.23.10", 22 | "codemirror": "^6.0.1", 23 | "nuxt": "^3.16.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /playground/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "./" 3 | - "playground" 4 | - "docs" 5 | - "client" 6 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base" 5 | ], 6 | "baseBranches": [ 7 | "master" 8 | ], 9 | "packageRules": [ 10 | { 11 | "matchBaseBranches": [ 12 | "master" 13 | ], 14 | "ignoreDeps": [ 15 | ] 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/devtools.ts: -------------------------------------------------------------------------------- 1 | // import { existsSync } from 'node:fs' 2 | // import type { Resolver } from '@nuxt/kit' 3 | // import type { Nuxt } from 'nuxt/schema' 4 | 5 | // const DEVTOOLS_UI_ROUTE = '/__codemirror_nuxt_devtools' 6 | // const DEVTOOLS_UI_LOCAL_PORT = 3300 7 | 8 | // export function setupDevToolsUI(nuxt: Nuxt, resolver: Resolver) { 9 | // const clientPath = resolver.resolve('./client') 10 | // const isProductionBuild = existsSync(clientPath) 11 | 12 | // Serve production-built client (used when package is published) 13 | // if (isProductionBuild) { 14 | // nuxt.hook('vite:serverCreated', async (server) => { 15 | // const sirv = await import('sirv').then(r => r.default || r) 16 | // server.middlewares.use( 17 | // DEVTOOLS_UI_ROUTE, 18 | // sirv(clientPath, { dev: true, single: true }), 19 | // ) 20 | // }) 21 | // } 22 | // In local development, start a separate Nuxt Server and proxy to serve the client 23 | // else { 24 | // nuxt.hook('vite:extendConfig', (config) => { 25 | // config.server = config.server || {} 26 | // config.server.proxy = config.server.proxy || {} 27 | // config.server.proxy[DEVTOOLS_UI_ROUTE] = { 28 | // target: `http://localhost:${DEVTOOLS_UI_LOCAL_PORT}${DEVTOOLS_UI_ROUTE}`, 29 | // changeOrigin: true, 30 | // followRedirects: true, 31 | // rewrite: path => path.replace(DEVTOOLS_UI_ROUTE, ''), 32 | // } 33 | // }) 34 | // } 35 | 36 | // nuxt.hook('devtools:customTabs', (tabs) => { 37 | // tabs.push({ 38 | // // unique identifier 39 | // name: 'codemirror-nuxt-devtools', 40 | // // title to display in the tab 41 | // title: 'CodeMirror DevTools', 42 | // // any icon from Iconify, or a URL to an image 43 | // icon: 'i-carbon-code', 44 | // // iframe view 45 | // view: { 46 | // type: 'iframe', 47 | // src: DEVTOOLS_UI_ROUTE, 48 | // }, 49 | // }) 50 | // }) 51 | // } 52 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtModule, addComponent, createResolver, addImports, extendViteConfig, addTypeTemplate } from '@nuxt/kit' 2 | // import { setupDevToolsUI } from './devtools' 3 | 4 | export interface ModuleOptions { 5 | devtools?: boolean 6 | } 7 | 8 | export default defineNuxtModule({ 9 | meta: { 10 | name: 'nuxt-codemirror', 11 | configKey: 'nuxtCodemirror', 12 | }, 13 | defaults: { 14 | // devtools: false, 15 | }, 16 | setup(_options, _nuxt) { 17 | const resolver = createResolver(import.meta.url) 18 | _nuxt.options.alias['#codemirror'] = resolver.resolve('./runtime') 19 | 20 | // if (_options.devtools) { 21 | // setupDevToolsUI(_nuxt, resolver) 22 | // } 23 | 24 | addComponent({ 25 | name: 'NuxtCodeMirror', 26 | filePath: resolver.resolve('./runtime/components/NuxtCodeMirror.vue'), 27 | }) 28 | 29 | addImports({ 30 | name: 'useNuxtCodeMirror', 31 | as: 'useNuxtCodeMirror', 32 | from: resolver.resolve('./runtime/composables/useNuxtCodeMirror.ts'), 33 | }) 34 | 35 | addTypeTemplate({ 36 | filename: 'nuxt-codemirror.d.ts', 37 | src: resolver.resolve('./runtime/types/nuxt-codemirror.d.ts'), 38 | }) 39 | 40 | extendViteConfig((config) => { 41 | config.resolve = config.resolve || {} 42 | config.resolve.alias = config.resolve.alias || {} 43 | 44 | // @ts-expect-error - Add alias for @codemirror/state 45 | config.resolve.alias['@codemirror/state'] = resolver.resolve(_nuxt.options.rootDir, 'node_modules/@codemirror/state') 46 | // @ts-expect-error - Add alias for @codemirror/view 47 | config.resolve.alias['@codemirror/view'] = resolver.resolve(_nuxt.options.rootDir, 'node_modules/@codemirror/view') 48 | }) 49 | }, 50 | }) 51 | -------------------------------------------------------------------------------- /src/runtime/components/NuxtCodeMirror.vue: -------------------------------------------------------------------------------- 1 | 71 | 72 | 79 | -------------------------------------------------------------------------------- /src/runtime/composables/useNuxtCodeMirror.ts: -------------------------------------------------------------------------------- 1 | import { Annotation, EditorState, StateEffect, type Extension } from '@codemirror/state' 2 | import { EditorView, type ViewUpdate } from '@codemirror/view' 3 | import { getDefaultExtensions } from '../getDefaultExtensions' 4 | import type { UseCodeMirrorProps } from '../types/nuxt-codemirror' 5 | import { getStatistics } from '../utils/utils' 6 | import { watch, watchEffect } from '#imports' 7 | 8 | const External = Annotation.define() 9 | 10 | const emptyExtensions: Extension[] = [] 11 | 12 | export function useNuxtCodeMirror(props: UseCodeMirrorProps) { 13 | const { 14 | modelValue: value, 15 | selection, 16 | onChange, 17 | onStatistics, 18 | onCreateEditor, 19 | onUpdate, 20 | onFocus, 21 | onBlur, 22 | extensions = emptyExtensions, 23 | autoFocus, 24 | theme = 'light', 25 | height = null, 26 | minHeight = null, 27 | maxHeight = null, 28 | width = null, 29 | minWidth = null, 30 | maxWidth = null, 31 | placeholder: placeholderStr = '', 32 | editable = true, 33 | readOnly = false, 34 | indentWithTab: defaultIndentWithTab = true, 35 | basicSetup: defaultBasicSetup = true, 36 | root, 37 | initialState, 38 | containerRef, 39 | viewRef, 40 | stateRef, 41 | } = props 42 | 43 | const defaultThemeOption = EditorView.theme({ 44 | '&': { 45 | height, 46 | minHeight, 47 | maxHeight, 48 | width, 49 | minWidth, 50 | maxWidth, 51 | }, 52 | '& .cm-scroller': { 53 | height: '100% !important', 54 | }, 55 | }) 56 | 57 | const updateListener = EditorView.updateListener.of((viewUpdate: ViewUpdate) => { 58 | if ( 59 | viewUpdate.docChanged 60 | && typeof onChange === 'function' 61 | // Fix echoing/ infinite update loops of the remote changes: 62 | // If transaction is market as remote we don't have to call `onChange` handler again 63 | && !viewUpdate.transactions.some(tr => tr.annotation(External)) 64 | ) { 65 | const doc = viewUpdate.state.doc 66 | const value = doc.toString() 67 | onChange(value, viewUpdate) 68 | } 69 | 70 | onStatistics?.(getStatistics(viewUpdate)) 71 | 72 | if (!viewUpdate.focusChanged) return 73 | 74 | if (viewUpdate.view.hasFocus) { 75 | onFocus?.(viewUpdate) 76 | } 77 | else { 78 | onBlur?.(viewUpdate) 79 | } 80 | }) 81 | 82 | const defaultExtensions = getDefaultExtensions({ 83 | theme, 84 | editable, 85 | readOnly, 86 | placeholder: placeholderStr, 87 | indentWithTab: defaultIndentWithTab, 88 | basicSetup: defaultBasicSetup, 89 | }) 90 | 91 | // const x = syntaxHighlighting(defaultHighlightStyle) 92 | 93 | let getExtensions = [defaultExtensions, updateListener, defaultThemeOption] 94 | 95 | if (onUpdate && typeof onUpdate === 'function') { 96 | getExtensions.push(EditorView.updateListener.of(onUpdate)) 97 | } 98 | 99 | getExtensions = getExtensions.concat(extensions) 100 | 101 | watchEffect(() => { 102 | if (containerRef.value && !stateRef?.value) { 103 | const config = { 104 | doc: value?.value, 105 | selection, 106 | extensions: getExtensions, 107 | } 108 | const stateCurrent = initialState 109 | ? EditorState.fromJSON(initialState.json, config, initialState.fields) 110 | : EditorState.create(config) 111 | stateRef.value = stateCurrent 112 | if (!viewRef.value) { 113 | const viewCurrent = new EditorView({ 114 | state: stateCurrent, 115 | parent: containerRef.value, 116 | root, 117 | }) 118 | viewRef.value = viewCurrent 119 | onCreateEditor?.(viewCurrent, stateCurrent) 120 | } 121 | } 122 | }) 123 | 124 | watch( 125 | () => props.container, 126 | (newContainer) => { 127 | if (newContainer === undefined) return 128 | containerRef.value = newContainer 129 | }, 130 | { immediate: true }, 131 | ) 132 | 133 | watch([ 134 | () => theme, 135 | () => extensions, 136 | () => height, 137 | () => minHeight, 138 | () => maxHeight, 139 | () => width, 140 | () => minWidth, 141 | () => maxWidth, 142 | () => placeholderStr, 143 | () => editable, 144 | () => readOnly, 145 | () => defaultIndentWithTab, 146 | () => defaultBasicSetup, 147 | () => onChange, 148 | () => onUpdate, 149 | ], 150 | () => { 151 | if (viewRef.value) { 152 | viewRef.value.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) }) 153 | } 154 | }, 155 | { immediate: true }, 156 | ) 157 | 158 | watchEffect(() => { 159 | if (value === undefined) { 160 | return 161 | } 162 | 163 | const currentValue = viewRef.value ? viewRef.value.state.doc.toString() : '' 164 | if (viewRef.value && value.value !== currentValue) { 165 | viewRef.value.dispatch({ 166 | changes: { from: 0, to: currentValue.length, insert: value.value || '' }, 167 | annotations: [External.of(true)], 168 | }) 169 | } 170 | }) 171 | 172 | watch([() => autoFocus, () => viewRef.value], ([autoFocus, view]) => { 173 | if (autoFocus && view) { 174 | view.focus() 175 | } 176 | }, 177 | { immediate: true }, 178 | ) 179 | } 180 | -------------------------------------------------------------------------------- /src/runtime/getDefaultExtensions.ts: -------------------------------------------------------------------------------- 1 | import type { Extension } from '@codemirror/state' 2 | import { indentWithTab, history, defaultKeymap, historyKeymap } from '@codemirror/commands' 3 | import type { 4 | KeyBinding, 5 | } from '@codemirror/view' 6 | import { 7 | EditorView, 8 | keymap, 9 | placeholder, 10 | lineNumbers, 11 | highlightActiveLineGutter, 12 | highlightSpecialChars, 13 | drawSelection, 14 | dropCursor, 15 | rectangularSelection, 16 | crosshairCursor, 17 | highlightActiveLine, 18 | } from '@codemirror/view' 19 | import { oneDark } from '@codemirror/theme-one-dark' 20 | import { EditorState } from '@codemirror/state' 21 | import { highlightSelectionMatches, searchKeymap } from '@codemirror/search' 22 | import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete' 23 | import { 24 | foldGutter, 25 | indentOnInput, 26 | syntaxHighlighting, 27 | defaultHighlightStyle, 28 | bracketMatching, 29 | indentUnit, 30 | foldKeymap, 31 | } from '@codemirror/language' 32 | import { lintKeymap } from '@codemirror/lint' 33 | import { defaultLightThemeOption } from './theme/light' 34 | 35 | export * from '@codemirror/theme-one-dark' 36 | export * from './theme/light' 37 | 38 | export interface BasicSetupOptions { 39 | lineNumbers?: boolean 40 | highlightActiveLineGutter?: boolean 41 | highlightSpecialChars?: boolean 42 | history?: boolean 43 | foldGutter?: boolean 44 | drawSelection?: boolean 45 | dropCursor?: boolean 46 | allowMultipleSelections?: boolean 47 | indentOnInput?: boolean 48 | syntaxHighlighting?: boolean 49 | bracketMatching?: boolean 50 | closeBrackets?: boolean 51 | autocompletion?: boolean 52 | rectangularSelection?: boolean 53 | crosshairCursor?: boolean 54 | highlightActiveLine?: boolean 55 | highlightSelectionMatches?: boolean 56 | 57 | defaultKeymap?: boolean 58 | closeBracketsKeymap?: boolean 59 | searchKeymap?: boolean 60 | historyKeymap?: boolean 61 | foldKeymap?: boolean 62 | completionKeymap?: boolean 63 | lintKeymap?: boolean 64 | tabSize?: number 65 | } 66 | 67 | export interface DefaultExtensionsOptions { 68 | indentWithTab?: boolean 69 | basicSetup?: boolean | BasicSetupOptions 70 | placeholder?: string | HTMLElement 71 | theme?: 'light' | 'dark' | 'none' | Extension 72 | readOnly?: boolean 73 | editable?: boolean 74 | } 75 | 76 | /** 77 | * Basic setup that includes standard CodeMirror extensions 78 | */ 79 | export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => { 80 | let keymaps: KeyBinding[] = [] 81 | if (options.closeBracketsKeymap !== false) { 82 | keymaps = keymaps.concat(closeBracketsKeymap) 83 | } 84 | if (options.defaultKeymap !== false) { 85 | keymaps = keymaps.concat(defaultKeymap) 86 | } 87 | if (options.searchKeymap !== false) { 88 | keymaps = keymaps.concat(searchKeymap) 89 | } 90 | if (options.historyKeymap !== false) { 91 | keymaps = keymaps.concat(historyKeymap) 92 | } 93 | if (options.foldKeymap !== false) { 94 | keymaps = keymaps.concat(foldKeymap) 95 | } 96 | if (options.completionKeymap !== false) { 97 | keymaps = keymaps.concat(completionKeymap) 98 | } 99 | if (options.lintKeymap !== false) { 100 | keymaps = keymaps.concat(lintKeymap) 101 | } 102 | 103 | const extensions: Extension[] = [] 104 | if (options.lineNumbers !== false) extensions.push(lineNumbers()) 105 | if (options.highlightActiveLineGutter !== false) extensions.push(highlightActiveLineGutter()) 106 | if (options.highlightSpecialChars !== false) extensions.push(highlightSpecialChars()) 107 | if (options.history !== false) extensions.push(history()) 108 | if (options.foldGutter !== false) extensions.push(foldGutter()) 109 | if (options.drawSelection !== false) extensions.push(drawSelection()) 110 | if (options.dropCursor !== false) extensions.push(dropCursor()) 111 | if (options.allowMultipleSelections !== false) extensions.push(EditorState.allowMultipleSelections.of(true)) 112 | if (options.indentOnInput !== false) extensions.push(indentOnInput()) 113 | if (options.syntaxHighlighting !== false) 114 | extensions.push(syntaxHighlighting(defaultHighlightStyle)) 115 | if (options.bracketMatching !== false) extensions.push(bracketMatching()) 116 | if (options.closeBrackets !== false) extensions.push(closeBrackets()) 117 | if (options.autocompletion !== false) extensions.push(autocompletion()) 118 | if (options.rectangularSelection !== false) extensions.push(rectangularSelection()) 119 | if (options.crosshairCursor !== false) extensions.push(crosshairCursor()) 120 | if (options.highlightActiveLine !== false) extensions.push(highlightActiveLine()) 121 | if (options.highlightSelectionMatches !== false) extensions.push(highlightSelectionMatches()) 122 | if (options.tabSize && typeof options.tabSize === 'number') 123 | extensions.push(indentUnit.of(' '.repeat(options.tabSize))) 124 | 125 | return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean) 126 | } 127 | 128 | export const getDefaultExtensions = (optios: DefaultExtensionsOptions = {}): Extension[] => { 129 | const { 130 | indentWithTab: defaultIndentWithTab = true, 131 | editable = true, 132 | readOnly = false, 133 | theme = 'light', 134 | placeholder: placeholderStr = '', 135 | basicSetup: defaultBasicSetup = true, 136 | } = optios 137 | const getExtensions: Extension[] = [] 138 | if (defaultIndentWithTab) { 139 | getExtensions.unshift(keymap.of([indentWithTab])) 140 | } 141 | if (defaultBasicSetup) { 142 | if (typeof defaultBasicSetup === 'boolean') { 143 | getExtensions.push(basicSetup({ highlightSpecialChars: true, lineNumbers: true, history: true, drawSelection: true, syntaxHighlighting: true, defaultKeymap: true, historyKeymap: true })) 144 | } 145 | else { 146 | getExtensions.unshift(basicSetup(defaultBasicSetup)) 147 | } 148 | } 149 | if (placeholderStr) { 150 | getExtensions.unshift(placeholder(placeholderStr)) 151 | } 152 | switch (theme) { 153 | case 'light': 154 | getExtensions.push(defaultLightThemeOption) 155 | break 156 | case 'dark': 157 | getExtensions.push(oneDark) 158 | break 159 | case 'none': 160 | break 161 | default: 162 | getExtensions.push(theme) 163 | break 164 | } 165 | if (editable === false) { 166 | getExtensions.push(EditorView.editable.of(false)) 167 | } 168 | if (readOnly) { 169 | getExtensions.push(EditorState.readOnly.of(true)) 170 | } 171 | 172 | return getExtensions 173 | } 174 | -------------------------------------------------------------------------------- /src/runtime/theme/light.ts: -------------------------------------------------------------------------------- 1 | import { EditorView } from '@codemirror/view' 2 | 3 | export const defaultLightThemeOption = EditorView.theme( 4 | { 5 | '&': { 6 | backgroundColor: '#fff', 7 | }, 8 | }, 9 | { 10 | dark: false, 11 | }, 12 | ) 13 | -------------------------------------------------------------------------------- /src/runtime/types/nuxt-codemirror.d.ts: -------------------------------------------------------------------------------- 1 | import type { EditorState, EditorStateConfig, Extension, StateField, EditorSelection, SelectionRange, Line } from '@codemirror/state' 2 | import type { EditorView, ViewUpdate } from '@codemirror/view' 3 | import type { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup' 4 | import type { ModelRef } from 'vue' 5 | import type { Ref } from '#imports' 6 | 7 | export interface NuxtCodeMirrorProps 8 | extends Omit { 9 | /** value of the auto created model in the editor. Works as underlying logic of a V-Model */ 10 | modelValue?: ModelRef 11 | /** The height value of the editor. */ 12 | height?: string 13 | /** The minimum height value of the editor. */ 14 | minHeight?: string 15 | /** The maximum height value of the editor. */ 16 | maxHeight?: string 17 | /** The width value of the editor. */ 18 | width?: string 19 | /** The minimum width value of the editor. */ 20 | minWidth?: string 21 | /** The maximum width value of the editor. */ 22 | maxWidth?: string 23 | /** focus on the editor. */ 24 | autoFocus?: boolean 25 | /** Enables a placeholder—a piece of example content to show when the editor is empty. */ 26 | placeholder?: string | HTMLElement 27 | /** 28 | * `light` / `dark` / `Extension` Defaults to `light`. 29 | * @default light 30 | */ 31 | theme?: 'light' | 'dark' | 'none' | Extension 32 | /** 33 | * Whether to optional basicSetup by default 34 | * @default true 35 | */ 36 | basicSetup?: boolean | BasicSetupOptions 37 | /** 38 | * This disables editing of the editor content by the user. 39 | * @default true 40 | */ 41 | editable?: boolean 42 | /** 43 | * This disables editing of the editor content by the user. 44 | * @default false 45 | */ 46 | readOnly?: boolean 47 | /** 48 | * Controls whether pressing the `Tab` key inserts a tab character and indents the text (`true`) 49 | * or behaves according to the browser's default behavior (`false`). 50 | * @default true 51 | */ 52 | indentWithTab?: boolean 53 | /** Fired whenever a change occurs to the document. */ 54 | onChange?(value: string, viewUpdate: ViewUpdate): void 55 | /** Some data on the statistics editor. */ 56 | onStatistics?(data: Statistics): void 57 | /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */ 58 | onUpdate?(viewUpdate: ViewUpdate): void 59 | /** The first time the editor executes the event. */ 60 | onCreateEditor?(view: EditorView, state: EditorState): void 61 | /** Fired whenever the editor is focused. */ 62 | onFocus?(view: ViewUpdate): void 63 | /** Fired whenever the editor is blurred. */ 64 | onBlur?(view: ViewUpdate): void 65 | /** 66 | * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information. 67 | * They can either be built-in extension-providing objects, 68 | * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of), 69 | * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed. 70 | */ 71 | extensions?: Extension[] 72 | /** 73 | * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here. 74 | * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root) 75 | */ 76 | root?: ShadowRoot | Document 77 | /** 78 | * Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function 79 | */ 80 | initialState?: { 81 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 82 | json: any 83 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 84 | fields?: Record> 85 | } 86 | } 87 | 88 | export interface UseCodeMirrorProps extends NuxtCodeMirrorProps { 89 | /** Container element of the CodeMirror instance */ 90 | container?: HTMLDivElement | null 91 | /** The EditorView of the CodeMirror instance */ 92 | viewRef: Ref 93 | /** The EditorState of the CodeMirror instance */ 94 | stateRef: Ref 95 | /** Editor element of the CodeMirror instance */ 96 | containerRef: Ref 97 | } 98 | 99 | export interface Statistics { 100 | /** total length of the document */ 101 | length: number 102 | /** Get the number of lines in the editor. */ 103 | lineCount: number 104 | /** Get the currently line description around the given position. */ 105 | line: Line 106 | /** Get the proper [line-break](https://codemirror.net/docs/ref/#state.EditorState^lineSeparator) string for this state. */ 107 | lineBreak: string 108 | /** Returns true when the editor is [configured](https://codemirror.net/6/docs/ref/#state.EditorState^readOnly) to be read-only. */ 109 | readOnly: boolean 110 | /** The size (in columns) of a tab in the document, determined by the [`tabSize`](https://codemirror.net/6/docs/ref/#state.EditorState^tabSize) facet. */ 111 | tabSize: number 112 | /** Cursor Position */ 113 | selection: EditorSelection 114 | /** Make sure the selection only has one range. */ 115 | selectionAsSingle: SelectionRange 116 | /** Retrieves a list of all current selections. */ 117 | ranges: readonly SelectionRange[] 118 | /** Get the currently selected code. */ 119 | selectionCode: string 120 | /** 121 | * The length of the given array should be the same as the number of active selections. 122 | * Replaces the content of the selections with the strings in the array. 123 | */ 124 | selections: string[] 125 | /** Return true if any text is selected. */ 126 | selectedText: boolean 127 | } 128 | 129 | export interface CodeMirrorRef { 130 | /** Container element of the CodeMirror instance */ 131 | container: HTMLDivElement | null 132 | /** The EditorView of the CodeMirror instance */ 133 | view: EditorView | undefined 134 | /** The EditorState of the CodeMirror instance */ 135 | state: EditorState | undefined 136 | /** Editor element of the CodeMirror instance */ 137 | editor: HTMLDivElement | null 138 | } 139 | -------------------------------------------------------------------------------- /src/runtime/utils/utils.ts: -------------------------------------------------------------------------------- 1 | import type { ViewUpdate } from '@codemirror/view' 2 | import type { Statistics } from '../types/nuxt-codemirror' 3 | 4 | export const getStatistics = (view: ViewUpdate): Statistics => { 5 | return { 6 | line: view.state.doc.lineAt(view.state.selection.main.from), 7 | lineCount: view.state.doc.lines, 8 | lineBreak: view.state.lineBreak, 9 | length: view.state.doc.length, 10 | readOnly: view.state.readOnly, 11 | tabSize: view.state.tabSize, 12 | selection: view.state.selection, 13 | selectionAsSingle: view.state.selection.asSingle().main, 14 | ranges: view.state.selection.ranges, 15 | selectionCode: view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to), 16 | selections: view.state.selection.ranges.map(r => view.state.sliceDoc(r.from, r.to)), 17 | selectedText: view.state.selection.ranges.some(r => !r.empty), 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /test/basic.test.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'node:url' 2 | import { describe, it, expect } from 'vitest' 3 | import { setup, $fetch } from '@nuxt/test-utils/e2e' 4 | 5 | describe('ssr', async () => { 6 | await setup({ 7 | rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)), 8 | }) 9 | 10 | it('renders the index page', async () => { 11 | // Get response to a server-rendered page with `$fetch`. 12 | const html = await $fetch('/') 13 | expect(html).toContain('
basic
') 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /test/fixtures/basic/app.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 7 | -------------------------------------------------------------------------------- /test/fixtures/basic/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import MyModule from '../../../src/module' 2 | 3 | export default defineNuxtConfig({ 4 | modules: [ 5 | MyModule, 6 | ], 7 | }) 8 | -------------------------------------------------------------------------------- /test/fixtures/basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "basic", 4 | "type": "module" 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json", 3 | "exclude": [ 4 | "dist", 5 | "node_modules", 6 | "docs", 7 | "playground", 8 | "client" 9 | ] 10 | } 11 | --------------------------------------------------------------------------------