The learn.nuxt.com from nuxt

Add interactivity shell issues.

I found when i create a interactivity shell, i need create tow process make it work, one auto-start process, one interactive process, but now status is not ok for that, beacuse if the user presses Ctrl+C during installation, the previous state should be successful!
like this:

Screen flashing when navigate in iframe

Screen.Recording.2023-12-03.at.17.41.33.mov

bug: color mode is not persistent

Color mode is not saving after changed and will roll back to system color after refresh.

Regarding to the usage of NuxtColorMode, we should set colorMode.preference instead of colorMode.value.

bug: preview pane size binding mistake

The preview pane should be bound to ui.panelPreview and now it is binding to ui.panelDocs

learn.nuxt.com/components/MainPlayground.vue

Lines 47 to 49 in 1289604

  <Pane :size="ui.panelDocs" min-size="10"> 

  <PanelPreview /> 

  </Pane>

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/autofix.yml

actions/checkout v4

pnpm/action-setup v2

actions/setup-node v4

autofix-ci/action v1

.github/workflows/ci.yml

actions/checkout v4

pnpm/action-setup v2

actions/setup-node v4

npm

package.json

@shikijs/core ^1.2.4

@shikijs/monaco ^1.2.4

@volar/monaco ^1.11.1

@vue/language-service ^1.8.27

@webcontainer/api ^1.1.9

@xterm/addon-fit ^0.10.0

@xterm/xterm ^5.5.0

birpc ^0.2.17

floating-vue ^5.2.2

jszip ^3.10.1

monaco-editor ^0.47.0

monaco-editor-textmate ^4.0.0

monaco-textmate ^3.0.1

onigasm ^2.2.5

shiki ^1.2.4

splitpanes ^3.1.5

strip-json-comments ^5.0.1

theme-vitesse ^0.7.8

unified ^11.0.4

vue ^3.4.21

vue-router ^4.3.0

@antfu/eslint-config ^2.13.0

@iconify-json/logos ^1.1.42

@iconify/json ^2.2.198

@nuxt/content ^2.12.1

@nuxt/devtools ^1.1.5

@nuxt/eslint ^0.3.1

@nuxt/kit ^3.11.2

@nuxtjs/color-mode ^3.3.3

@nuxtjs/seo 2.0.0-rc.10

@pinia/nuxt ^0.5.1

@unocss/eslint-plugin ^0.59.0

@unocss/extractor-mdc ^0.59.0

@unocss/nuxt ^0.59.0

@vueuse/nuxt ^10.9.0

eslint ^9.0.0

eslint-plugin-format ^0.1.0

execa ^8.0.1

fast-glob ^3.3.2

fuse.js ^7.0.0

monaco-editor-core ^0.47.0

nuxt ^3.11.2

nuxt-icon ^0.6.10

pathe ^1.1.2

remark-external-links ^9.0.1

typescript ^5.4.4

vue-tsc ^2.0.11

pnpm 8.15.6

templates/basic/.layer-playground/package.json

birpc ^0.2.14

templates/basic/package.json

pnpm 8.15.6

Check this box to trigger a request for Renovate to run again on this repository

https://learn-dev.nuxt.com/ show page not found

Hi, Fu,

I'm afraid there is something wrong with this site https://learn-dev.nuxt.com/

I got "Page Not Found" tips when visited it.

Might you confirm that in your free time.

Well, take good care of yourself.
why not toke some photos in Spring, you have not update your Instagram for a long time. Make some time for relax!
Wish you best!

images could not be shown normally in preview window.

As you have seen, when I wrote a to show a picture, I got a bad picture in the preview window.

[500 error]: Cannot set propeties of undefined (setting 'size')

Repoduction:

Go to learn-dev.nuxt.com
Got nuxt routing module section by clicking next module buttons
Refresh the page after reaching page https://learn-dev.nuxt.com/concepts/routing
Again issue coming when come to home page and refresh

Issue:

Video Indexed Summary

Hi Anthony,

I am a beginner hoping to learn basics of WebApp development by following along.

In doing so, I think I'll watch and rewatch the process to apply to some of my own projects. For that, I've made a different kind of summary to link to your chapters and videos. See here for an example.

Do you think this is useful or a neusance if associated with your project? Perhaps I should be makeing it better before publishing or putting it in a different section of github?

Let me know your leaning and I'll either stop or continue on.

Thanks.

error `setting size of null` pop again

I think the first solution you try is right...

  onMounted(() => {
    watch(features, () => {
      if (features.value.fileTree === true) {
        if (ui.panelFileTree <= 0)
          ui.panelFileTree = 20
      }
      else if (features.value.fileTree === false) {
        ui.panelFileTree = 0
      }

      if (features.value.terminal === true)
        ui.showTerminal = true
      else if (features.value.terminal === false)
        ui.showTerminal = false
    })
  })

The current solution just covered the real problem up, you shall try:

clear the cookie
refresh the playground
the problem pop up again

internal server error at first start

I'm experiencing the error after starting the dev server:

Internal server error: Soft-invalidated module "/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/nuxt/dist/app/entry.js" should not have existing transform result

[nitro] [unhandledRejection] TypeError: Cannot read properties of null (reading '_file')
    at ReactiveEffect.fn (/Users/a1mer/f/learn.nuxt.com/components/PanelDocs.vue:39:131)
    at ReactiveEffect.run (/Users/a1mer/f/learn.nuxt.com/node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:162:19)
    at get value [as value] (/Users/a1mer/f/learn.nuxt.com/node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1138:33)
    at unref (/Users/a1mer/f/learn.nuxt.com/node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1021:29)
    at Object.get (/Users/a1mer/f/learn.nuxt.com/node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1027:35)
    at _sfc_ssrRender (/Users/a1mer/f/learn.nuxt.com/components/PanelDocs.vue:70:16)
    at renderComponentSubTree (/Users/a1mer/f/learn.nuxt.com/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:685:9)
    at renderComponentVNode (/Users/a1mer/f/learn.nuxt.com/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:631:12)
    at renderVNode (/Users/a1mer/f/learn.nuxt.com/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:745:14)
    at renderVNodeChildren (/Users/a1mer/f/learn.nuxt.com/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:761:5)

It don't influence the functions of the website.
And, if I reload the page, the error will disappear.

The occurence pattern:
If I have opened http://localhost:3000, then restart the dev server, I'll give this error immediately.

If I haven't opened http://localhost:3000, then I need to reload once or twice to see this error.

However, it will disappear after reloading the page unless I restart the dev server.

There are two errors in the console, later Cannot read properties of null is a new one.
The first error has been there for a bit long period.

Resizable terminal?

Should the terminal be resizable and/or collapsible? Or is it better to always show it to see what is happening?

I've used this in the past: https://github.com/antoniandre/splitpanes
Not sure if it is maintained anymore though

bug: playground store `previewLocation` cannot set

Currently the play.previewLocation cannot been set in wc.on('server-ready')

Solution

previewLocation may change back to ref instead of reactive

Most of the links in guide click unresponsive.

feature: Collapse terminal panel

Small feature aiming to immediately show/hide the terminal
(This can be applied to all panels in the future)

collapse-terminal.mov

The editor resizes, then adjusts the splitter, and a style bug appears

Disable textarea resizing, use splitter resizing

add interactivity shell

I implemented this feature according to my own ideas. Here is the modified code. If you think it's acceptable, I will submit a pull request. Thank you.
gaojy62@c217511

do not limit width of ContentDoc

bug: preview panel size

fix preview panel size

I found that you made a mistake in one place, "ui.panelDocs" should be changed to "ui.panelPreview".

Here:

<Pane :size="ui.panelDocs" min-size="10">
  <PanelPreview />
</Pane>
<Pane :size="100 - ui.panelEditor - ui.panelDocs">
  <PanelTerminal :stream="play?.stream" />
</Pane>

file tree bug

empty folder does not appear in the file tree. The empty components copy folder is not displayed in the browser
if multiple folders exist, all of them will automatically expand.