#.TSX layout

12 messages · Page 1 of 1 (latest)

hidden silo
#

Trying to setup very basic layout with JSX/TSX but index page won't render at all with the layout.

Here is my app.vue at root:
<template> <div> <NuxtLayout> <NuxtPage /> </NuxtLayout> </div> </template>

./layouts/default.tsx:
`import Header from "./header";

export default defineComponent({
render() {
return (
<div id="default layout">
<Header />
layout
<slot />
</div>
);
},
});
`

./pages/index.tsx:
export default defineComponent({ render() { return <div class="text-red-500">Index page</div>; }, });

serene vapor
#

Shouldn't the layout be in layouts/default.tsx?

hidden silo
serene vapor
#

Hmmm, then I don't know. No errors either?

#

Shouldn't the return be a function?

hidden silo
#

Added the return to my function components but stil the same result

#

Weird that even by googling I can not find any examples of Vue 3 with Nuxt, Pages directory and JSX

#

Seems like JSX is super rare on Vue world

#

For someone from React world that would be great to use it

serene vapor
#

Yeah it's not very common due to Single File Components being easier to work with.

#

I haven't tried JSX in Vue myself, also only in Next/React