The `mounted()` hooks in a VuePress site are not triggered when the `vuepress build` command is used with the `--debug` option, although they work properly when using `vuepress dev`

UPDATE: Initially, I believed that the issue was caused by the custom theme; however, I have since revised the question. The live demo has also been fixed.

I have developed a customized theme for VuePress by extending the @vuepress/theme-default with some new Vue components. Everything runs smoothly when using vuepress dev. However, after creating a site with vuepress build, none of the event listeners are attached, resulting in issues such as the menu not opening when the button is clicked.

You can access the source code on GitHub.

Additionally, a live demonstration is available there: You can inspect the menu button (located at 

#app > div.theme-container.sections-layout > header > div.sidebar-button
) and compare it to the one at .

The issue appears to stem from the mounted hooks not being executed in the version generated by build. According to the documentation, browser API access should occur within the beforeMount or mounted hooks. It seems like this is where the problem lies.

Any insights or suggestions on how to resolve this?

I am utilizing VuePress cli.js/1.2.0 win32-x64 node-v12.13.0

javascriptvue.jswebpackvuepress

Answer №1

It turns out that the issue was not related to the custom template, but rather caused by using both the --debug option and vuepress build together. This combination inevitably leads to errors.

If you take a closer look at the VuePress CLI documentation, you'll find that the --debug option is meant for the development server only...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

challenge with altering data in transmission when using the GET method

$('.textedit').editable('/webpage/skeleton/edit_text/text/process', { loadurl: '/webpage/skeleton/edit_text/loadraw', loaddata: {id: $(this).attr('id'), client: $(this).data('client')}, submitda ...

javascriptjquery

Display a modal across all pages by incorporating a button component, regardless of its placement

I've implemented a header in my react app with a show dialog button that appears on all necessary pages. Currently, my approach to displaying the dialog is as follows: When the user clicks the button, I dispatch an action to the redux store { type:S ...

javascriptreactjsmaterial-ui

What is the best way to submit form data along with an image using Angular?

Recently, I built an application where users can submit form data along with an uploaded image. Since I am new to Angular, I am facing some challenges in merging the user-submitted data model and the image upload using the FormData method. Can anyone guide ...

javascriptangularangularjs

What is the process for compiling a separate JS file using the Vue CLI?

Currently working on developing a Vue application using the Vue CLI, and I am in need of compiling a separate JS file along with the Vue solution. The desired compiled structure should look something like this... `-- dist |-- js | |-- main.js ...

vue.jsvue-cli

Experiencing a bug in my express application: TypeError - Unable to access properties of undefined (reading 'prototype')

I've encountered the TypeError: Cannot read properties of undefined (reading 'prototype') error in my javascript file. Despite researching online, it seems that many attribute this issue to importing {response} from express, but I am not doi ...

javascripttypescriptexpress

CSS rotation causing issues with absolute positioning

In the example below, I have demonstrated the current behavior I am experiencing and the desired outcome. // Rotated div rotated.style.left = "50px"; rotated.style.top = "100px"; // Original "untouched" div original.style.left = "50px"; original.style.t ...

javascripthtmlcss

Setting up various connections is made possible through Node.js Socket.io

In the process of developing a straightforward chat application using socket.io and incorporating passport.js for user authentication, an issue arises when users log out and then back in. The previous socket connection remains active, resulting in two conn ...

javascriptnode.jsexpresssocket.iopassport.js

Identifying mouse proximity through processing.js

I am using processing.js for coding. I am trying to dynamically adjust the size variable so that it increases as the cursor approaches the ellipse and decreases as the cursor moves away from it. I also want to set a limit for the size, preferably between 5 ...

javascripthtmlprocessingprocessing.js

Upgrade the WordPress light editor to the advanced version

After developing a script to upgrade the WordPress editor on a specific page from light mode to Advanced once a user clicks the Unlock button and confirms their desire to make the switch, an issue arose. Despite deducting 5 coins from the user's balan ...

javascriptphpjqueryajaxwordpress

Having a strange glitch when creating a discord bot. Any suggestions on how to get it up and running smoothly?

Each time I attempt to launch my Discord bot, an error pops up in PowerShell. C:\Users\alexa\Desktop\WHA Period Bot\index.js:1 c SyntaxError: Invalid or unexpected token at Module._compile (internal/modules/cjs/loader.js:891: ...

javascriptnode.jsdiscorddiscord.js

Trouble getting the onclick event to function properly with PHP, ajax, and jQuery

I am looking to incorporate an onclick event using PHP to achieve a specific goal. My aim is to utilize ajax to prevent page refreshing and generate buttons upon click events. I am uncertain about merging the div buttons with the ajax outcome. The PHP fi ...

javascriptphpjqueryajax

Tips for showcasing the button label on a different page upon clicking the button

I need help with a functionality where the name of a button clicked on one page is displayed on another page. Here's an example: <a href="#" class="btn btn-danger btn-lg btn-block"> <?php echo $sql->name; ?></a> Currently, echo ...

javascriptphphtmlmysql

Windows users can rely on auto-saving, but Mac users may need to find another solution

I tried the solution provided in this discussion thread (Saving without dialog window) to save an image as PNG without triggering the 'Save as..' dialog. It worked perfectly on my Windows computer. However, when I shared the script with my collea ...

javascriptphotoshopphotoshop-script

Only retrieve one result from v-for loop depending on the key value

My v-for loop is set up to display a single result based on the chosen :key value from the counter data property. Everything is working well, but I am encountering problems when I try to add <transitions> for a smoother update of the value. The issue ...

javascriptvue.jsv-for

Trying to follow a guide, but struggling to identify the error in my JavaScript syntax

I'm attempting to follow an older tutorial to change all references of the word "cão" on a page to "gato". These instances are contained within spans, and I'm using the getElementsByTagName method in my script. However, when trying to cycle thro ...

javascriptsyntax-error

Transmitting a custom PDF document through email with React and Node.js

Currently, I am in the process of developing an application designed to streamline the completion of a complex form. The data entered into this form will be stored on a remote database for future reference and editing purposes. Once the form is ready for s ...

javascriptnode.jsreactjsexpressgraphql

Is there a way to eliminate the check mark from a Vuetify v-checkbox?

When loading data into a datatable through an API call, the first row displays a checkbox in the initial column. Users can select this checkbox and then press a button to trigger another API call that removes the selected row. As a result, the following ro ...

vue.jsvuetify.js

Changing the placeholder text in a text input field based on the value of the v-model in Vue

I am looking to update the placeholder of a text input using Vue.js data binding. Below is my code snippet. <select2 :options="power_options" v-model="power"> <option selected value="hp">hp</option> & ...

vue.jsvue-componentjquery-select2

Troubleshooting Async Issues in Node.js

I am encountering an issue with my node.js app structure, which is as follows: async.forever( function(callback) { async.series([ function(callback) { SomeFunction1(function(err, results) { if (err) callback(err); ...

javascriptnode.jsasync.js

How to transfer a parameter to a JavaScript function within an Ajax success callback?

While attempting to call the UpdateItem function using AJAX with an anchor tag, I encountered a console error. Error : req is undefined function updateItem(id, desc, vehicleno){ alert("i am here"); $('#ProcessModal').modal(&a ...

javascriptasp.netajaxasp.net-ajax