Meet Nuxt Supported Browsers
, your project's secret sauce for unleashing the awesomeness of modern CSS! Say goodbye to the headache of old, clunky browsers. Make sure your web magic shines on the latest browsers. If someone's stuck in the digital Stone Age, we'll politely nudge them to upgrade for a smoother, trendier experience. It's time to level up your project's style game! 😎🚀
- Force the project to run in a minimum version of the browser.
- Redirect to a custom page if the version fails.
- Use the browser user-agent to capture all info.
- Create a custom browser name further than the pre-defined one.
- Add
nuxt-supported-browsers
dependency to your project
# Using pnpm
pnpm add -D nuxt-supported-browsers
# Using yarn
yarn add --dev nuxt-supported-browsers
# Using npm
npm install --save-dev nuxt-supported-browsers
- Add
nuxt-supported-browsers
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-supported-browsers'
]
...
supportedBrowsers: {
redirect: "/unsupported-browser",
versions: {
Chrome: 86,
Firefox: 70,
Safari: 14.1,
Edge: 86,
Opera: 12,
"Internet Explorer": null,
"Unknown Browser": 12,
},
},
})
- Create a page with the name you have set in the Nuxt config, e.g.,
unsupported-browser.vue
, and add the desired message.
That's it! You can now use Nuxt Supported Browsers in your Nuxt app ✨
- Create a custom built-in UI page for unsupported browsers
- Ensure that at least one version is set in the Nuxt config
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release