Cry0nicS Posts - Answer Overflow

Cry0nicS

Explore posts from servers

•Created by Cry0nicS on 7/21/2024 in #❓・help

CSR not working on Vercel

I migrated from Firesbase hosting to Vercel. But my project deals with large files (15-20MB per file) and Vercel has a limit of <5MB per file for SSR. However, for client-side rendering it should be no upload limit. (#3 https://vercel.com/docs/errors/FUNCTION_PAYLOAD_TOO_LARGE) So, initially I tried to set route rules for my upload page so be ssr: false. Like

    routeRules: {
        "/services/upload": {ssr: false},
}

    routeRules: {
        "/services/upload": {ssr: false},
}

This didn't seem to work, so I set the entire project ssr: false - and after deployment ... It still throws FUNCTION_PAYLOAD_TOO_LARGE Important to know: the files are being sent to an API (hosted on firebase) that stores the data in Firebase. Only the Nuxt3 (front-end) is hosted on Vercel Any suggestions or ideas ?

1 replies

NNuxt

•Created by Cry0nicS on 5/13/2024 in #❓・help

Basic error page with Typescript and NuxtError

I'm trying to create a basic error.vue The main issue is that I can't seem to find a way to set a default statusCode.

<script setup lang="ts">
import type {NuxtError} from "#app";

interface DefaultError {
    statusCode: number;
    message: string;
}

const {error} = withDefaults(
    defineProps<{
        error?: NuxtError<DefaultError>;
    }>(),
    {
        error: {
            statusCode: 500,
            message: "An error occurred"
        }
    }
);

const handleError = () => clearError({ redirect: '/' })
</script>

<script setup lang="ts">
import type {NuxtError} from "#app";

interface DefaultError {
    statusCode: number;
    message: string;
}

const {error} = withDefaults(
    defineProps<{
        error?: NuxtError<DefaultError>;
    }>(),
    {
        error: {
            statusCode: 500,
            message: "An error occurred"
        }
    }
);

const handleError = () => clearError({ redirect: '/' })
</script>

Keeps throwing Vue: Object literal may only specify known properties, and statusCode does not exist in type What's a good way to handle this. so that in the template I can do error.statusCode and error.message ?

1 replies

NNuxt

•Created by Cry0nicS on 3/28/2024 in #❓・help

Pass URL query params to href

I have a button with a link that looks like this

<Button
    :href="$t('cta.button.url')"
    size="xl"
    variant="primary">
    {{ $t("cta.button") }}
</Button>

<Button
    :href="$t('cta.button.url')"
    size="xl"
    variant="primary">
    {{ $t("cta.button") }}
</Button>

I want to read all the query params from this page and pass them along to this href. I tried something like

<script lang="ts">
const {t} = useI18n();
const route = useRoute();
const query = route.query;

const buttonUrl = computed(() => {
    // Get the base URL from translations
    const baseUrl = t('cta.button.url');
    // Convert the route query parameters to a query string
    const queryString = new URLSearchParams(query).toString();

    // Return the full URL, appending the query string if it exists
    return queryString ? `${baseUrl}?${queryString}` : baseUrl;
});
</script>

<script lang="ts">
const {t} = useI18n();
const route = useRoute();
const query = route.query;

const buttonUrl = computed(() => {
    // Get the base URL from translations
    const baseUrl = t('cta.button.url');
    // Convert the route query parameters to a query string
    const queryString = new URLSearchParams(query).toString();

    // Return the full URL, appending the query string if it exists
    return queryString ? `${baseUrl}?${queryString}` : baseUrl;
});
</script>

However, the URLSearchParams doesn't take a LocationQuery (that is being return from route.query). What's the best way to sort this out?

7 replies

NNuxt

•Created by Cry0nicS on 7/11/2023 in #❓・help

Cannot init new project

I tried creating a new app as per the docs.

$ npx nuxi@latest init nuxt-prototype

npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\...
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\{...}\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

$ npx nuxi@latest init nuxt-prototype

npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\...
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\{...}\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Running Windows 11, node 20.3.1 and npm 9.6.7. Any ideas what is wrong?

2 replies

Gaming

Programming