Including Native JavaScript in Vue

▶

As I've mentioned to you on several occasions, the Academy application (available at https://academy.desarrollolibre.net/) is built with Laravel for the backend (API) and Vue for the frontend (SPA).

I want to show you a curious feature: the book viewer.

I want to show you a curious feature: the book viewer.

In the viewer, the sidebar shows the subtitles (H2 headings) of a chapter. By clicking on one, the page automatically scrolls to that section.

Here's a question for you: If you're implementing an application completely in Vue, how would you solve this internal navigation? I'd like you to leave your idea in the comments.

Vue vs. Native JavaScript for DOM Manipulation

Vue is excellent for page manipulation (DOM) and for creating Single Page Applications (SPA). It's ideal for handling user events, displaying animated elements, and managing reactive navigation. The same applies to Angular and React.

However, sometimes, data presentation (such as internal navigation based on content that has already been rendered) can be less straightforward if you try to solve it using only the framework's reactive tools.

I'm not saying it can't be done in Vue; there are surely plugins or ways to look up the references. But in this case, I opted for a simpler and more robust solution: Native JavaScript.

️ Implementation with Native JavaScript and Vue

The main difficulty here is that Vue doesn't have a direct reference to the book's content. The full chapter text is loaded as an HTML string from the database and dumped directly onto the page using a div:

<div v-html="html_desde_la_db"></div>

Given that Vue does not manage this content directly, it's the perfect scenario to use Native JavaScript to get the DOM references and then use Vue to iterate and manage the click event.

1. Getting the Headings (H2)

The key is to use document.querySelectorAll() to select the H2 headings within the main content container (.post):

getHxs() {
  this.hxs = []
  setTimeout(() => {
    // JS nativo para obtener todos los H2 en el DOM
    this.hxs = document.querySelectorAll(".post h2")
  }, 500) // Se usa setTimeout para asegurar que el contenido se haya renderizado
}

This function stores the actual DOM H2 elements in the hxs variable.

2. Iteration in Vue and the Click Event

Once hxs contains the array of DOM elements, Vue uses it to build the sidebar:

<p v-for="h in hxs" :key="h" class="cursor-pointer m-0 hover:text-white"
 @click="h.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">
 {{ h.innerText }}
</p>

We use v-for to iterate the hxs array (built with Native JS).

We use h.innerText (pure JS) to get the heading text as the title in the sidebar.

3. The scrollIntoView() Function

For the scroll part, we employ the native JavaScript method scrollIntoView(). This method is called on the DOM element reference (h) and moves the page's view towards it.

• h.scrollIntoView(...): Moves the scroll to the element's position.
• behavior: 'smooth': Makes the scroll animated.
• block: 'start': Places the element at the start (top) of the visible area.

This demonstrates that you can integrate Native JavaScript snippets within your Vue, React, or Angular applications to solve DOM functionalities that would otherwise be complicated or require searching for an external plugin.