Component syntax in Vento #669

smcjustin · 2024-10-02T16:42:52Z

smcjustin
Oct 2, 2024

Hello,

I'm having a bit of trouble implementing components in Vento using the Lume docs. I'm trying to do this purely with Vento/Front Matter/YAML without any JS.

I can import a menu component using the {{ include "_components/menu.vto" }} syntax but with many components this is tedious and doesn't read well. But when trying to use the component syntax e.g. {{ comp Menu }}{{ \comp}} OR {{ comp.menu() }} I receive errors that the variable is undefined.

I'm also not sure about how to write the component file in Vento. For example, if I want to create a component called Menu, where in the file menu.vto should I be naming the component? Or is it based on the file name. Both the Lume and Vento documentation is a bit ambiguous about this.

Thanks!

oscarotero · 2024-10-02T18:22:30Z

oscarotero
Oct 2, 2024
Maintainer

Hi!
The appropiate way to use vento components is with {{ comp.menu() }}, or {{ comp.menu }} here the content {{ /comp }}.
If you have errors about an undefined variable, maybe you're using a non existing variable in the component.

To create vento components, just create a .vto file inside the _components folder. For example, _components/menu.vto and inside the file:

<ul>
  {{ for link of links }}
  <li><a href="{{ link.url }}">{{ link.text }}</a></li>
  {{ /for }}
</ul>

To use the component, remember to pass the data:

{{ comp.menu({ links: [...] }) }}

2 replies

smcjustin Oct 2, 2024
Author

Thank you for your response.

I've tried a minimal configuration to try and isolate the issue – no variables inside the component:

_components/hello.vto

<span>Hello, World</span>

layouts/base2.vto

<!DOCTYPE html>
<html>
    <head>
        <title>{{ title }}</title>
    </head>
    <body>
            {{ comp.hello() }}   
    </body>
</html>

This generates the error:

error: Uncaught (in worker "") (in promise) Error: Error rendering the layout of the page /pages/home.vto
            throw new Error(
                  ^
    at https://deno.land/x/lume@v2.3.2/core/renderer.ts:176:19
    at eventLoopTick (ext:core/01_core.js:175:7)
    at async Promise.all (index 2)
    at async concurrent (https://deno.land/x/lume@v2.3.2/core/utils/concurrent.ts:21:3)
    at async Renderer.renderPages (https://deno.land/x/lume@v2.3.2/core/renderer.ts:155:7)
    at async Site.#buildPages (https://deno.land/x/lume@v2.3.2/core/site.ts:641:5)
    at async Site.build (https://deno.land/x/lume@v2.3.2/core/site.ts:541:9)
    at async buildSite (https://deno.land/x/lume@v2.3.2/cli/utils.ts:48:3)
    at async onmessage (https://deno.land/x/lume@v2.3.2/cli/build_worker.ts:23:16)
Caused by: Error: Error in the template /_includes/layouts/base2.vto:9:13

{{ comp.hello() }}

> Cannot read properties of undefined (reading 'hello')

    at Environment.createError (https://deno.land/x/vento@v1.12.10/src/environment.ts:313:12)
    at eval (eval at compile (https://deno.land/x/vento@v1.12.10/src/environment.ts:137:25), <anonymous>:19:23)
    at Environment.runString (https://deno.land/x/vento@v1.12.10/src/environment.ts:95:20)
    at VentoEngine.render (https://deno.land/x/lume@v2.3.2/plugins/vento.ts:99:38)
    at Renderer.render (https://deno.land/x/lume@v2.3.2/core/renderer.ts:216:32)
    at Renderer.#renderLayout (https://deno.land/x/lume@v2.3.2/core/renderer.ts:293:28)
    at eventLoopTick (ext:core/01_core.js:175:7)
    at async https://deno.land/x/lume@v2.3.2/core/renderer.ts:159:28
    at async Promise.all (index 2)
    at async concurrent (https://deno.land/x/lume@v2.3.2/core/utils/concurrent.ts:21:3)
Caused by: TypeError: Cannot read properties of undefined (reading 'hello')
    at eval (eval at compile (https://deno.land/x/vento@v1.12.10/src/environment.ts:137:25), <anonymous>:13:30)
    at Environment.runString (https://deno.land/x/vento@v1.12.10/src/environment.ts:95:20)
    at VentoEngine.render (https://deno.land/x/lume@v2.3.2/plugins/vento.ts:99:38)
    at Renderer.render (https://deno.land/x/lume@v2.3.2/core/renderer.ts:216:32)
    at Renderer.#renderLayout (https://deno.land/x/lume@v2.3.2/core/renderer.ts:293:28)
    at eventLoopTick (ext:core/01_core.js:175:7)
    at async https://deno.land/x/lume@v2.3.2/core/renderer.ts:159:28
    at async Promise.all (index 2)
    at async concurrent (https://deno.land/x/lume@v2.3.2/core/utils/concurrent.ts:21:3)
    at async Renderer.renderPages (https://deno.land/x/lume@v2.3.2/core/renderer.ts:155:7)
error: Uncaught (in promise) Error: Unhandled error in child worker.
    at Worker.#pollControl (ext:runtime/11_workers.js:204:19)
    at eventLoopTick (ext:core/01_core.js:175:7)

oscarotero Oct 2, 2024
Maintainer

I can't reproduce this error.

Can you run this example and confirm if it works fine?
vento-component.zip

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Component syntax in Vento #669

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Component syntax in Vento #669

Uh oh!

smcjustin Oct 2, 2024

Replies: 1 comment · 2 replies

Uh oh!

Uh oh!

oscarotero Oct 2, 2024 Maintainer

Uh oh!

smcjustin Oct 2, 2024 Author

Uh oh!

oscarotero Oct 2, 2024 Maintainer

smcjustin
Oct 2, 2024

Replies: 1 comment 2 replies

oscarotero
Oct 2, 2024
Maintainer

smcjustin Oct 2, 2024
Author

oscarotero Oct 2, 2024
Maintainer