Nuxt specific corrections #2410
Conversation
Minor adjustments so that the example doesn't need tinkering to run in latest default Nuxt installation. Line 38: Nuxt does not use a src folder by default & convert name to multi-word to avoid naming convention errors. Line 83: Removed id attribute from page container div. Nuxt adds its own id="app" to the app root container. Line 85: Convert name to multi-word to avoid naming convention errors. Line 91: Fix typo client-only
|
✔️ Deploy Preview for tiptap-embed ready! 🔨 Explore the source changes: c708aa8 🔍 Inspect the deploy log: https://app.netlify.com/sites/tiptap-embed/deploys/61ea7a4bfbf60300083dadb8 😎 Browse the preview: https://deploy-preview-2410--tiptap-embed.netlify.app |
docs/installation/nuxt.md
Outdated
| @@ -35,7 +35,7 @@ npm install @tiptap/vue-2 @tiptap/starter-kit | |||
| If you followed step 1 and 2, you can now start your project with `npm run serve`, and open [http://localhost:8080/](http://localhost:8080/) in your favorite browser. This might be different, if you’re working with an existing project. | |||
|
|
|||
| ## 3. Create a new component | |||
| To actually start using Tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `src/components/Tiptap.vue`. | |||
| To actually start using Tiptap, you’ll need to add a new component to your app. Let’s call it `TipTap` and put the following example code in `~/components/TipTap.vue`. | |||
There was a problem hiding this comment.
~ is an alias for the user home directory, so if someone is created the file from the CLI it would end up in the wrong location.
Can you just write components/TiptapEditor here - without the ~?
There was a problem hiding this comment.
In a Nuxt project configuration ~ refers to the root folder of the project. In contrast to a vue project created with vue-cli project, the official Nuxt cli project creator (create-nuxt-app) uses this notation out of the box.
There was a problem hiding this comment.
Yeah, I know. But if some says "create a file", which you normally do on your file system, editor, the bash ... in that context it stands for a different folder, the user home.
If we would say "import that component" (which then would happen in the Nuxt context) that would be a different thing, and would make sense.
There was a problem hiding this comment.
I see, didn't realize it was a wording problem. Then components/TiptapEditor.vue should do just fine.
Glad I can be of use! So, when using one word components, default and strongly-recommended eslint rule vue/multi-word-component-names fails:
We could use TiptapEditor, as you suggest, in both the simple and v-model cases, which would also bridge the component name difference that users face when transitioning from |
|
Awesome! Thanks for your work on this. 🙏 |
Minor adjustments so that the example doesn't need tinkering to run in latest default Nuxt installation.
Line 38: Nuxt does not use a src folder by default & convert name to multi-word to avoid naming convention errors.
Line 83: Removed id attribute from page container div. Nuxt adds its own id="app" to the app root container.
Line 85: Convert name to multi-word to avoid naming convention errors.
Line 89: Import component before use, component autoload occasionally fails.
Line 91: Fix typo client-only