Nuxt3: Error using nuxt-cookie-control (@dargmuesli/nuxt-cookie-control)

I want to use this nuxt-cookie-consent package:

• https://www.npmjs.com/package/@dargmuesli/nuxt-cookie-control
• https://nuxt.com/modules/cookie-control
• https://gitlab.com/broj42/nuxt-cookie-control

I am using Nuxt 3.3.1

There is also a playground example on how to use the dependency here: https://stackblitz.com/github/dargmuesli/nuxt-cookie-control?file=playground%2Fapp.vue

As instructed in the README.md I have installed the package and changed my nuxt.config.ts to this:

// nuxt.config.ts
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
ssr: true,
css: [
'vuetify/styles',
'@mdi/font/css/materialdesignicons.min.css',
],
vite: {
// @ts-ignore
// curently this will lead to a type error, but hopefully will be fixed soon #justBetaThings
ssr: {
noExternal: ['vuetify'], // add the vuetify vite plugin
},
},
build: {
transpile: ['vuetify'],
},
modules: [
async (options, nuxt) => {
// @ts-ignore
nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(
vuetify()
))
},
['nuxt-cookie-control', {
//default css (true)
//if css is set to false, you will still be able to access
//your color variables (example. background-color: var(--cookie-control-barBackground))
css: true,
//enable or disable css variables polyfill
cssPolyfill: true,
//in case you have subdomains (shop.yourdomain.com)
domain: 'yourdomain.com',
//if you want to tree-shake locales set locales you want to use
locales: ['en', 'de'],
//modal opener (cookie control)
controlButton: true,
//block iframes to prevent them from adding additional cookies
blockIframe: true,
//position of cookie bar:
//'top-left', 'top-right', 'top-full',
//'bottom-left', 'bottom-right', 'bottom-full'
barPosition: 'bottom-full',
dashInDescription: true,
//default colors
//if you want to disable colors set colors property to false
colors: {
barTextColor: '#fff',
modalOverlay: '#000',
barBackground: '#000',
barButtonColor: '#000',
modalTextColor: '#000',
modalBackground: '#fff',
modalOverlayOpacity: 0.8,
modalButtonColor: '#fff',
modalUnsavedColor: '#fff',
barButtonHoverColor: '#fff',
barButtonBackground: '#fff',
modalButtonHoverColor: '#fff',
modalButtonBackground: '#000',
controlButtonIconColor: '#000',
controlButtonBackground: '#fff',
barButtonHoverBackground: '#333',
checkboxActiveBackground: '#000',
checkboxInactiveBackground: '#000',
modalButtonHoverBackground: '#333',
checkboxDisabledBackground: '#ddd',
controlButtonIconHoverColor: '#fff',
controlButtonHoverBackground: '#000',
checkboxActiveCircleBackground: '#fff',
checkboxInactiveCircleBackground: '#fff',
checkboxDisabledCircleBackground: '#fff',
},
//default texts
text: {
barTitle: 'Cookies',
barDescription: 'We use our own cookies and third-party cookies so that we can show you this website and better understand how you use it, with a view to improving the services we offer. If you continue browsing, we consider that you have accepted the cookies.',
acceptAll: 'Accept all',
declineAll: 'Delete all',
manageCookies: 'Manage cookies',
unsaved: 'You have unsaved settings',
close: 'Close',
save: 'Save',
necessary: 'Necessary cookies',
optional: 'Optional cookies',
functional: 'Functional cookies',
blockedIframe: 'To see this, please enable functional cookies',
here: 'here'
}
}]     
],
head: {
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Lato&display=swap",
},
],
},
})

I have also changed my app.vue to this:

When starting up my app, it says it can't find module nuxt-cookie-control, but it is listed in the dependencies:

What am I doing wrong, and how come it can't find the module even though it is installed as a dependency? Thanks!

Check the playground; make sure to use the full module name:

// `nuxt.config.ts`
export default defineNuxtConfig({
    modules: [
        '@dargmuesli/nuxt-cookie-control'
    ],

    cookieControl: {
        // options
    }
}