These files don't work for Nuxt

[joezimjs]

I ran npx mkcert create-ca; npx mkcert create-cert, then tried to feed those certs to Nuxt's config: https://nuxt.com/docs/api/configuration/nuxt-config#https

If I run it using ca.key and ca.crt I get this in my browser (Vivaldi)

If I use cert.key and cert.crt, then I get the unsafe warning:

Am I using this output wrong?

[Subash]

Can you also post your nuxt config? Looks like you are using ca.key and ca.cert instead of cert.key and cert.crt.

[joezimjs]

I told you in my message that I tried both. The text between the pictures specifies that I tried cert.key and cert.crt and the 2nd picture shows what happens when I use those.

Here's my Nuxt config

import Inspector from 'unplugin-vue-inspector/vite';

// https://v3.nuxtjs.org/api/configuration/nuxt.config

const isProd = process.env.NODE_ENV === 'production';

export default defineNuxtConfig({
    extends: ['nuxt-seo-kit'],

    modules: [
        '@storyblok/nuxt',
        '@nuxtjs/tailwindcss'
        // 'nuxt-speedkit'
    ],

    experimental: {
        componentIslands: true
    },

    components: [
        {
            path: '~/components/rich-text',
            global: true
        }
    ],

    devServer: {
        https: {
            key: 'cert.key',
            cert: 'cert.crt'
        }
    },
    devtools: true,

    storyblok: {
        accessToken: process.env.STORYBLOK_TOKEN,
        apiOptions: {
            region: 'us',
            version: isProd ? 'published' : 'draft'
        },
        bridge: !isProd // optimizes by excluding the bridge on production
    },

    tailwindcss: {
        /* https://tailwindcss.nuxtjs.org/getting-started/options */
    },

    vite: {
        server: { https: true },
        plugins: [Inspector()]
    }
});

[Subash]

I apologize for the misunderstanding. This package doesn't install the certificate to the system trust store automatically so you have to trust the certificate manually to make the warning go away.