I'm currently working on a project using Nuxt 3. One part of the application can only be accessed when the user is logged in. I'm trying to figure out how to turn off SSR for these specific routes, but still keep it enabled for the public routes.
Is there a method to achieve this in Nuxt 3? So far, all I've come across is the option to globally disable SSR in the nuxt.config.ts file.
If you're searching for a solution, consider exploring the concept of Hybrid rendering, where you have the flexibility to define parameters for each page, including ssr:
export default defineNuxtConfig({
routeRules: {
// Homepage pre-rendered at build time
'/': { prerender: true },
// Product page generated on-demand, revalidates in background
'/products/**': { swr: 3600 },
// Blog post generated on-demand once until next deploy
'/blog/**': { isr: true },
// Admin dashboard renders only on client-side
'/admin/**': { ssr: false },
}
})
I'm currently managing a project with two folders for components - 1) src/components/ and 2) src/views. The general components like a drawer or nav are stored in the first folder, while the pages (views) are stored in the second. Now I face a challen ...
Struggling to display different form elements (placeholder and submit action) within a bootstrap vue form. Check out the form below: <template> <b-form-input v-if="input" placeholder="Name Your Swatch, Enter and Save Edit" @keypress=" ...
Hello, I am looking to create a custom loading spinner using CSS, JS or any other method with my logo. I have the logo in PNG, GIF, and SVG formats and would like to use it for long site loads, image loads, or any other loading processes within my Vue3 pro ...
This task seemed simple at first, but I quickly found myself stuck. The idea is to have a drawer (MainLayout component) that includes an image. My goal is to display different images inside the drawer on various pages. Here is the code for the drawer: < ...
Running into an issue while integrating Firebase Auth with my Vue app. After a page refresh, a logged in user is not recognized as such and gets redirected to the login page when trying to access a protected route. This occurs because the initial callback ...
I have a TypeScript application that runs smoothly in development mode using ts-node. However, after building the application, I encounter some unexpected warnings and errors. This is my tsconfig.json: { "compilerOptions": { "incremen ...
Looking for a way to dynamically load SVG items with ease. The items needed are quite simple. Here's a basic template: <svg:rect [attr.x]="x" [attr.y]="y" width="10" height="10" /> Component Class Example: export class DraggableSvgItemCompon ...
Having trouble with my Single Page application: every time I refresh the page after rendering the login form, it goes back to the homepage. How can I prevent this and make sure the page stays on the login form even after a refresh? This is what my homepag ...
Project Link: Click here to view the project In my testForm, I have 3 levels of formGroup, with the last formGroup being an array of formGroups. I am trying to enable the price field when a checkbox is clicked. I am unsure how to access the price contro ...
Having trouble opening an sqlite DB file from a js axios.get request which is resulting in an exception message being outputted to the console. The request is supposed to call my PHP controller to retrieve data from the DB and return it json-encoded. On t ...
To promote composition within our codebase, we utilize passing components as props. Is there a way to enforce type checking for the components passed as props? For instance, let's consider a commonly used Typography component throughout the codebase, ...
click here for image descriptioncheck out this other image I am facing an issue where my props are displaying as $attrs in VUE DEV TOOLS. I attempted to resolve the problem by disabling attrs using inheritAttrs: false and v-bind="$attrs", but it did not ...
I am facing a peculiar issue that has me stumped. On my mobile device, my page initially loads like this homepage However, once I tap the screen, all the components suddenly appear. Is there a way to simulate a click on my mobile? I'm struggling to u ...
I have been attempting to install the "Material-UI" library into my own private component library, which is an NPM package built with TypeScript. I have customized some of the MUI components and imported them into another application from my package. Howe ...
Struggling with inputting data into a ChartJS line-chart instance. The chart only displays one point with the right data but an incorrect label (named 'label'): Check out the plot image The odd thing is, the extracted arrays appear to be accura ...
I'm currently working on a React project where I need to integrate the PayPal order function and include every item from an array. Below is my code snippet, but I'm struggling with how to achieve this: export default function Cart(): JSX.Element ...
After some investigation, I discovered that the asyncData hook does not get triggered when performing a hard refresh on the page. However, it is crucial for me to load important data to display on this page. I need to ensure that this data is always avai ...
I encountered the following error message: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" This issue arose after inserting "type": "module" into the package.json package.json { "name": &qu ...
I am currently using Vue after coming from a React background. In React, there is a method called .map that allows you to render a component multiple times based on the number of items in an array and extract data from each index. Here's an example: f ...
I would like to navigate to the next page with a click event using a dynamic route. The route ID is retrieved from a Vuex store. When I click, the following URL is generated: http://localhost:8080/worklist/%7Bname:'worklistDynamic',%20params:%7B ...