⚑️ Integrate Nuxt with Twind, The smallest, fastest, most feature complete tailwind-in-js solution in existence!

Related tags

Vue.js nuxt-twind
Overview

Nuxt Twind Module

Integrate Nuxt with Twind, The smallest, fastest, most feature complete tailwind-in-js solution in existence!

Warning πŸ§ͺ This module was a quick prototype to try twind integration with Nuxt and not well tested.

Online playground: stackblitz

Features

  • ⚑️ No build step: Get all the benefits of Tailwind without the need for PostCSS, configuration, purging, or autoprefixing.
  • πŸš€ SSR Transforms: Fast class transformation and Optimizations
  • 😎 One low fixed cost: Twind ships the compiler, not the CSS. This means unlimited styles and variants for one low fixed cost of ~4.5kB.
  • πŸš— Client HMR support: Fast reloads on client-side

Installation

Install dependencies:

# npm
npm i -D nuxt-twind twind@next @twind/preset-tailwind@next

# yarn
yarn add -D nuxt-twind twind@next @twind/preset-tailwind@next

# pnpm
pnpm i -D nuxt-twind twind@next @twind/preset-tailwind@next

Add module to nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: [
    'nuxt-twind'
  ]
})

Create twind.config.ts in root of your project:

import { defineConfig } from 'twind'
import presetTailwind from '@twind/preset-tailwind'

export default defineConfig({
  presets: [presetTailwind()]
})

Now you can use classes in app:

<template>
  <div>
    <h2 class="inline-block p-3 mb-4 text-2xl font-bold bg-yellow-300">
      Hey there!
    </h2>
  </div>
</template>

Development

  • Run npm run dev:prepare to generate type stubs.
  • Use npm run dev to start playground in development mode.

License

MIT. Made with πŸ’š

Comments
  • Roll back devDependency nuxt-twind to ^0.1.1

    Roll back devDependency nuxt-twind to ^0.1.1

    Mend Renovate

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | nuxt-twind | devDependencies | rollback | ^0.1.2 -> ^0.1.1 |


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 1
  • chore(deps): update devdependency @nuxtjs/eslint-config-typescript to v11 - autoclosed

    chore(deps): update devdependency @nuxtjs/eslint-config-typescript to v11 - autoclosed

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @nuxtjs/eslint-config-typescript | ^10.0.0 -> ^11.0.0 | age | adoption | passing | confidence |


    Release Notes

    nuxt/eslint-config

    v11.0.0

    Compare Source

    Bug Fixes

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Roll back devDependency nuxt-twind to ^0.1.4 - autoclosed

    Roll back devDependency nuxt-twind to ^0.1.4 - autoclosed

    Mend Renovate

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | nuxt-twind | devDependencies | rollback | ^0.1.5 -> ^0.1.4 |


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update devDependency nuxt-twind to ^0.1.4

    Update devDependency nuxt-twind to ^0.1.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | nuxt-twind | ^0.1.2 -> ^0.1.4 | age | adoption | passing | confidence |


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Configure Renovate - autoclosed

    Configure Renovate - autoclosed

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • package.json (npm)
    • playground/package.json (npm)

    Configuration

    πŸ”‘ Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

    Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

    What to Expect

    With your current configuration, Renovate will create 2 Pull Requests:

    Roll back dependency nuxt-twind to ^0.1.1
    • Schedule: ["at any time"]
    • Branch name: renovate/nuxt-twind-rollback
    • Merge into: main
    • Upgrade nuxt-twind to ^0.1.1
    Pin dependencies

    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update devdependency @nuxtjs/eslint-config-typescript to v12

    chore(deps): update devdependency @nuxtjs/eslint-config-typescript to v12

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @nuxtjs/eslint-config-typescript | ^10.0.0 -> ^12.0.0 | age | adoption | passing | confidence |


    Release Notes

    nuxt/eslint-config

    v12.0.0

    Compare Source

    Features

    v11.0.0

    Compare Source

    Bug Fixes

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update all non-major dependencies

    chore(deps): update all non-major dependencies

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @nuxt/kit | ^3.0.0-rc.8 -> ^3.0.0 | age | adoption | passing | confidence | | @twind/preset-tailwind (source) | ^1.0.0-next.38 -> ^1.0.1 | age | adoption | passing | confidence | | defu | ^6.0.0 -> ^6.1.1 | age | adoption | passing | confidence | | eslint (source) | ^8.21.0 -> ^8.28.0 | age | adoption | passing | confidence | | nuxt | ^3.0.0-rc.8 -> ^3.0.0 | age | adoption | passing | confidence | | twind (source) | ^1.0.0-next.38 -> ^1.0.1 | age | adoption | passing | confidence |


    Release Notes

    nuxt/framework

    v3.0.0: Nuxt 3.0 stable

    Compare Source

    ✨ Official Release Announcenment

    πŸ’¬ Release Discussion

    πŸ“ Changelog

    Check out v3.0.0-rc.14 for other recent changes.

    🩹 Fixes
    • nuxt: Removed auto imports (#​9045)
    • schema: Initialise runtimeConfig.public with empty object (#​9050)
    • cli: Upgrade with latest tag (#​9060)
    • nuxt: Allow union type arguments for useAsyncData (#​9061)
    πŸ“– Documentation
    🏑 Chore
    ❀️ Contributors

    v3.0.0-rc.14

    Compare Source

    Note This is the last release candidate for Nuxt v3! Are you ready? πŸ‘€

    πŸ‘‰ Release Discussion

    Changelog

    compare changes

    ⚠️ Breaking Changes
    • cli: Setup nuxt globally with nuxt test (#​4578)
    • nuxt: Only add $f fetch prefix to auto-keys (#​8852)
    • test-utils: Use vitest/node subpath export (#​8815)
    • nuxt: Remove initialCache option (#​8885)
    • nuxt: Enable payload extraction only for nuxi generate (#​9018)
    • nuxt: Include request url and params in useFetch key (#​6632)
    • nuxt: Fix typo for NuxtRenderHTMLContext.bodyPrepend (#​8712) (#​8704)
    • nuxt: Remove support for 404.vue shorthand (#​8809)
    • kit: Remove support for module container (#​9010)
    • nuxt: Move head option support into defineNuxtComponent (#​8901)
    • Remove deprecated api (#​9029) - Remove PrivateRuntimeConfig interface support - Remove autoImports option - Remove autoImports:extend hook support - Remove deprecated addAutoImport and addAutoImport utilities (use addImports and addImportsDir) - Remove defer option for useAsyncData - Remove support for installModule(nuxt, nuxtModule) - Remove support for module defenition as function - Remove support for name in module definition (use meta.name) - Remove deprecated throwError (use showError) - Remove deprecated useActiveRoute (use useRoute) - Remove deprecated NuxtConfig and defineNuxtConfig imports from nuxt (import from nuxt/config) - Remove deprecated <Script> component (use useHead) - Remove deprecated RouterConfigOptions interface (use RouterConfigSerializable) - Remove deprecated fileName for template options (use filename) - Remove deprecated <NuxtNestedPage> and <NuxtChild> components - Remove deprecated buildModules config - Remove deprecated privateRuntimeConfig and publicRuntimeConfig options - Remove deprecated imports.presets[].name (use presets.imports instead)
    πŸš€ Enhancements
    🩹 Fixes
    • nuxt: Check if global transitions are activated for scroll behavior (#​8700)
    • nuxt: Allow cookies to be set to null to unset them (#​8769)
    • nuxt: Add catchall paths to prerender list (#​8782)
    • schema: Add declarations to ignore list (#​8787)
    • ssr: Ensure useRequestHeaders are case-insensitive (#​8805)
    • nuxt: Do not render page if we are throwing error (#​8821)
    • nuxt: Swallow issues with query selectors (#​8843)
    • nuxt: ⚠️ Only add $f fetch prefix to auto-keys (#​8852)
    • test-utils: Detect project root using nuxt.config with .mjs and .cjs extensions (#​8855)
    • cli: Exclude dist from type checking (#​8848)
    • test-utils: ⚠️ Use vitest/node subpath export (#​8815)
    • nuxt: Detect non-functional imports within page meta (#​8881)
    • nuxt: Preserve render errors (#​8884)
    • nuxt: ⚠️ Remove initialCache option (#​8885)
    • nuxt: Use app.baseURL when fetching error page on server (#​8888)
    • nuxt: Avoid passing attrs to default slot for <ClientOnly> component (#​8921)
    • vite: Add extend layers to fs.allow (#​9006)
    • nuxt: Include layers in esbuild transform (#​9014)
    • kit: Add external module to transpile (#​8963)
    • nuxt: ⚠️ Enable payload extraction only for nuxi generate (#​9018)
    • nuxt: ⚠️ Include request url and params in useFetch key (#​6632)
    • nuxt: Improve hmr for pages macros (#​8940)
    πŸ’… Refactors
    • nuxt: ⚠️ Fix typo for NuxtRenderHTMLContext.bodyPrepend (#​8712)
    • nuxt: ⚠️ Fix typo for NuxtRenderHTMLContext.bodyPrepend (#​8704)
    • nuxt: ⚠️ Remove support for 404.vue shorthand (#​8809)
    • nuxt: Explicitly import app in nuxt-root (#​8729)
    • kit: ⚠️ Remove support for module container (#​9010)
    • Update unjs dependencies to stable v1 (#​9011)
    • nuxt: ⚠️ Move head option support into defineNuxtComponent (#​8901)
    • ⚠️ Remove deprecated api (#​9029)
    πŸ“– Documentation
    ❀️ Contributors

    v3.0.0-rc.13

    Compare Source

    πŸ‘‰ Release discussion

    ⭐ What is New?

    πŸ”° Security Fixes

    This release contains multiple security related fixes #​8675, #​8674 and #​8673 reported via huntr.dev platform by OhB00.

    We recommend you upgrade to the latest version as soon as possible.

    If you encounter "The request URL ... is outside of Vite service allow list" issue, try adding path to vite.server.fs.allow in nuxt.config. read more.

    πŸš€ Performance Improvements

    Using a new method to extract definePageMeta improves vite performance and makes lazy compilation of pages possible (#​8536).

    πŸ’― Strict Config Schema and Types

    We have cleaned up the configuration schema (#​8487) so that you no longer would be confused with Nuxt 2 options and also can quickly notice any typos in nuxt.config file.

    Typescript strict mode is also enabled by default with this release as best practice. (#​8667)

    πŸš‡ Nitro Development Server Proxy

    Using nitro.devProxy option you can now configure proxies for the development server. (learn more)

    Changelog

    compare changes

    ⚠️ Breaking Changes
    • nuxt: ⚠️ Use parser to generate page metadata (#​8536)
    • schema: ⚠️ Use strict typescript mode by default (#​8667)
    • test-utils: ⚠️ Update vitest args (#​8325)
    • schema: ⚠️ Disable app.pageTransition and app.layoutTransition by default (#​8436)
    • nuxt: ⚠️ Cleanup schema and split nuxt 2 types (#​8487)
    πŸš€ Enhancements
    • nuxt: Default router scroll behavior (#​3851)
    • nuxt: Make useFetch options reactive (#​8374)
    • kit: Add updateTemplates utility (#​8413)
    • nuxt: Add dev warnings when setPageLayout is used incorrectly (#​8464)
    • Add <devOnly> component (#​7950)
    • nuxt: Allow setting name and path for a route in definePageMeta (#​8633)
    • kit: Add addServerPlugin utility (#​8635)
    • kit, nuxt: Support prerender:routes and addPrerenderRoutes (#​8670)
    🩹 Fixes
    • nuxt: Don't use or assignment (#​8299)
    • nuxt: Pass original request headers to the error page (#​7340)
    • nuxt: Scroll to top on dynamic routes with different params (#​8327)
    • nuxt: Router defaults overwrite custom options always (#​8334)
    • cli: Update analzye main handler (#​8339)
    • nuxt: RouterBehavior comparison for hash block (#​8383)
    • nuxt: Don't load payloads for external urls (#​8370)
    • vite: Invalidate virtual modules with vite-node (#​8389)
    • nuxt: Avoid directly importing vue-router inside <NuxtLayout> (#​8421)
    • webpack: Print build errors (#​8388)
    • kit: Use pathe to resolve aliases (#​8453)
    • test-utils: Override NITRO_PORT as well (#​8458)
    • nuxt: Call data refresh hook in parallel (#​8470)
    • nuxt: Allow responding with custom headers from error.vue (#​8469)
    • schema: Disable early hints by default (#​8486)
    • kit: Don't require nuxt context when resolving path (#​8504)
    • nuxt, nuxi: Improve pages creation and removal DX (#​8502)
    • nuxt: Add vue-router to optimized deps (#​8544)
    • vite: Handle all vite middleware routes (#​8601)
    • nuxt: Pass async-data errors through to client (#​8521)
    • nuxt: Check before appending comma in composable keys (#​8529)
    • nuxt: ⚠️ Use parser to generate page metadata (#​8536)
    • kit: Normalize handler paths (#​8626)
    • nuxt: Don't force prerender / if user doesn't have that route (#​8639)
    • nuxt: Do not inline global styles in html response (#​8666)
    • schema: ⚠️ Use strict typescript mode by default (#​8667)
    • nuxt: Disallow directly rendering error page (#​8673)
    • Resolve ids to support pnpm (#​8671)
    • vite: Enable fs strict mode (#​8674)
    • nuxt: Ensure payload url has no protocol (#​8675)
    πŸ’… Refactors
    • test-utils: ⚠️ Update vitest args (#​8325)
    • schema: ⚠️ Disable app.pageTransition and app.layoutTransition by default (#​8436)
    • nuxt: ⚠️ Cleanup schema and split Nuxt 2 types (#​8487)
    πŸ“– Documentation
    πŸ“¦ Build
    🏑 Chore
    • renovate: Ignore monorepo dependency upgrades (f934343b)
    • Upgrade vitest to 0.24 (#​6764)
    • nuxt: Add type for headers (#​8326)
    • examples: Add missing dependency and script for testing example (#​8457)
    • Reenable auto-upgrades for vueuse/head (#​8506)
    • Update nitropack to 0.6.1 (5a43e68e)
    βœ… Tests
    ❀️ Contributors
    • Adewale Adeyemi
    • Anthony Fu
    • Christian Burkhart
    • ClΓ©ment Ollivier
    • Damian GΕ‚owala
    • Daniel Roe
    • David Stack
    • Dawid Stefanko
    • Dmitriy
    • Farnabaz
    • Joel
    • Joel Wenzel
    • Johann Schopplich
    • Johnson Chu
    • Josh Deltener
    • Julien Huang
    • Nils
    • OndΕ™ej MisΓ‘k
    • Pascal Sthamer
    • Pooya Parsa
    • Rajendra
    • Sacha STAFYNIAK
    • SΓ©bastien Chopin
    • Zecka

    v3.0.0-rc.12

    Compare Source

    πŸ’¬ Release Discussion

    πŸš€ How to Upgrade

    Note Make sure to recreate the lock file in the project in case of any issues after the upgrade.

    • Automated: npx nuxi@latest upgrade --force
    • Manual: Bump nuxt dependency to 3.0.0-rc.12 and then use npx nuxi@latest cleanup to cleanup any local caches

    ⭐ What is New?

    πŸ“ Route Rules

    RC.12 comes with the first public beta for route rules and hybrid rendering support. Using route rules you can define rules for a group of nuxt routes, change rendering mode or assign a cache strategy based on route! Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using Nitro caching layer. Whenever possible, route rules will be automatically applied to the deployment platform's native rules (currently Netlify and Vercel are supported).

    πŸ‘‰ See docs for examples and more info.

    βš—οΈ Nitropack 0.6

    Nitropack upgraded to 0.6 (Release Notes) and h3 upgraded to 0.8 (Release Notes)

    ⚠️ Breaking changes: Using defineEventHandler() or eventHandler() is now required. If you were previously using a Node.js middleware with (req, res, next?) syntax you need to wrap them with fromNodeMiddleware() to convert it into an h3 handler.

    πŸ‘¦ useHead updates

    This release brings a brand-new version of @vueuse/head with some significant performance improvements and bug fixes. Check out https://github.com/nuxt/framework/pull/8000 for more details, but in particular:

    • Fully-typed usage of useHead
    • No more flickering when transitioning between routes
    • Support ordering of head metadata
    • Faster head hydration and deduping

    ⚠️ Breaking changes: The shortcuts viewport and charset can only be used within nuxt.config and not within useHead directly. For more information on how to update, see https://github.com/nuxt/framework/pull/8000.

    ⚑ Page Meta

    New router options validate and redirect are now supported directly in definePageMeta - so you can perform additional validation for dynamic routes, or implement route redirects directly within pages.

    definePageMeta({
      // redirect: '/admin',
      validate: async (route) => {
        const nuxtApp = useNuxtApp()
        // Check if the id is made up of digits
        return /^\d+$/.test(params.id)
      }
    })
    
    πŸŒ… Early Hints

    Nuxt's node server renderer will now respond with 103 Early Hints before the server renders the app, meaning that you should see a decreased TTFB and earlier resource loading in a supported environment - which at the moment is Chrome with your Nuxt app served over HTTPS with newer than HTTP/1.1.

    πŸ“– Nuxt 3 Docs

    Nuxt's documentation is now written with Nuxt 3's new theming system and the latest Docus and Content module versions. Check it out at https://v3.nuxtjs.org! Expect more coming soon!

    nuxt 3 docs

    Changelog

    compare changes

    πŸš€ Enhancements
    • nuxt: Support redirect within page metadata (#​7746)
    • cli: Support --dotenv for dev, build and preview commands (#​7660)
    • nuxt: Allow configuring plugins directory (#​7981)
    • nuxt: Add default slot to <NuxtLoadingIndicator> (#​7128)
    • pages: Add validate hook for definePageMeta (#​7870)
    • nuxt: Refresh override for data fetching composables (#​7864)
    • schema, nuxt: Allow user-configurable serverDir (#​7868)
    • nuxt: Parse html to treeshake client-only components (#​7527)
    • nuxt: Wrap #components client exports with createClientOnly (#​7412)
    • nuxt: Add ssr: false route rule to enable SPA mode (#​7938)
    • nuxt: Migrate to latest @vueuse/head (#​8000)
    • nuxt: ⚠️ Add <NuxtPage> to #components (#​8145)
    • nuxt: Add hook debug mode (#​7690)
    • cli: Add nuxi build-module command (#​7610)
    • schema: Add experimental routesRules shortcut (#​7954)
    • kit: Support plugin array for addVitePlugin and addWebpackPlugin (#​8270)
    πŸ”₯ Performance
    • nitro: Respond with early hints in node-based environments (#​7893)
    • nuxt: ⚠️ Use component loader to add meta components (#​8167)
    • nuxt: Remove vue-router dependency from minimal app (#​8188)
    • nuxt: Improve link prefetching (#​8225)
    🩹 Fixes
    • nuxt: Export and auto-import clearNuxtData (#​7710)
    • test-utils: Support vitest v0.20.x (#​7712)
    • cli: Include workspaceDir in tsconfig include (#​7726)
    • cli: Stub defineNuxtConfig for nuxi info (#​7728)
    • nuxt: Do not warn for non-existent default layout (#​7748)
    • nuxt: Respect immediate option in useFetch (#​7720)
    • nuxt: Respect baseURL when rendering payload path (#​7809)
    • nuxt: Don't disable scripts in dev mode with experimental noScripts (#​7745)
    • Downgrade Node.js ^16.11.0 requirement to ^16.10.0 (#​7865)
    • nuxt: Handle schema types for relative module paths (#​7946)
    • vite: Add type-checker to client build for ssr: false (#​7930)
    • nuxt: Allow auto-import component with same filename (#​7713)
    • test-utils: Respect setupTimeout (#​7866)
    • nuxt: Fix lazy import of .client components (#​7422)
    • nuxt: Remove fragment from createClientOnly (#​7774)
    • head: Allow using the default slot for script content like noscript (#​7858)
    • nuxt: Don't prerender index.html with a server (#​7831)
    • docs: Link to api config reference (#​8038)
    • docs: Link to installation section (#​8040)
    • nuxt: Page hydration and double load (#​7940)
    • schema: Declare untyped dependency (#​8064)
    • nuxt: Use correct cache and add baseURL to payload (#​7984)
    • cli: Replace lazyHandle with defineLazyHandler (#​8049)
    • schema: Evaluate environment variables when resolving values (#​8079)
    • vite: Prevent overlap between vite assets and app routes (#​7989)
    • nuxt: Don't inline styles for per-request ssr: false (#​8106)
    • nuxt: ⚠️ refresh to override previous requests by default (#​8190)
    • nuxt: Enable router when app/router.options.ts file is present (#​8193)
    • kit: Log module id to the console when import fails (#​8198)
    • nuxt: Avoid head dom update on same route click (#​8206)
    • webpack: Add global to new line (#​8226)
    • schema: RouteRules config (#​8252)
    • cli: Don't includeworkspaceDir in tsconfig by default (#​8256)
    • nuxt: Avoid preloading external routes (#​8255)
    • nuxt: Allow disabling early hints (#​8264)
    • nuxt: Lazy-load entry CSS (#​8278)
    • nuxt: Ignore cache rules for middleware and errors (#​8291)
    πŸ’… Refactors
    πŸ“– Documentation
    🌊 Types
    🏑 Chore
    ⚠️ Breaking Changes
    • nuxt: ⚠️ Add <NuxtPage> to #components (#​8145)
    • nuxt: ⚠️ Use component loader to add meta components (#​8167)
    • nuxt: ⚠️ refresh to override previous requests by default (#​8190)
    ❀️ Contributors
    • Alex
    • Alex C
    • Alexander Lichter
    • Andrew Mudrov
    • Anish Ghimire
    • Anthony Fu
    • AuroraTea
    • Barbapapazes
    • Benicio Cardozo
    • Chenying
    • Christian Preston
    • Cinob
    • ClΓ©ment Ollivier
    • Cupid Valentine
    • Damian GΕ‚owala
    • Daniel Kelly
    • Daniel Roe
    • Daniil Chudo
    • Fumihiro-Yano
    • Harlan Wilton
    • Israel OrtuΓ±o
    • James Ray
    • Josh Deltener
    • Julien Huang
    • Krutie Patel
    • Lovue
    • Martin Benndorf
    • Miketromba
    • MiniDigger
    • Mmis1000
    • Niklas
    • Pooya Parsa
    • Rajendra
    • Randy
    • Reinier Kaper
    • SΓ©bastien Chopin
    • Tech Genius
    • Tobias Diez
    • Toni
    • Tuğberk KΔ±lΔ±Γ§
    • Won-hyeok Jung
    • Xezard
    • YaΓ«l Guilloux
    • Yu Yamazaki
    • θœη‹—

    v3.0.0-rc.11

    Compare Source

    πŸ’¬ Join the release discussion

    πŸš€ How to Upgrade

    Note Make sure to recreate the lock file in the project in case of any issues after the upgrade.

    • Automated: npx nuxi@latest upgrade --force
    • Manual: Bump nuxt dependency to 3.0.0-rc.11 and then use npx nuxi@latest cleanup to cleanup any local caches

    ⭐ What is New?

    Full Static Enhancements

    We have introduced Full-Static mode payload extraction in RC.10. Many of the issues from the initial implementation are resolved with this release thanks to your amazing feedback! Notably for SPA routes and state that is now in the initial state.

    πŸ§ͺ We understand that there might be still issues with the new implementation. Please report if spotted any. You can use new experimental.payloadExtraction: false flag in nuxt.config to opt-out as well.

    IPv6 and HTTPS support for nuxi dev and vite

    Nuxi CLI and unjs/listhen are improved and now support --https flag and ipv6 hosts out of the box with an auto-generated certificate. You can use --ssl-cert and --ssl-key to provide own generated SSL certificates with mkcert for example as well.

    Issues with vite HMR and vite-node should be resolved as well. If you were previously using NODE_TLS_REJECT_UNAUTHORIZED or custom vite.server.hmr options for a workaround, you can try to remove them.

    Note: If you see something like http://[::]:3000/ when running nuxi preview, it is all normal! The New IPv6 URL works in all modern browsers and is also backward compatible with IPv4 interfaces. If for some reason encountered any issues, try setting HOST to 0.0.0.0 to disable IPv6 listener.

    Nitro Improvements

    Nitro is the server engine for Nuxt 3. We had landed several fixes in 0.5.2 and 0.5.3 versions improving stability and bug fixes.

    Full Changelog

    compare changes

    πŸš€ Enhancements
    🩹 Fixes
    • nuxt: Disable payload extraction for spa generated pages (#​7535)
    • nuxt: Do not pass prefetched class to custom link (#​7522)
    • cli: Improved self-signed certificate for nuxi dev --https (#​7545)
    • vite: nuxi dev --https working out of the box (#​7547)
    • schema: Update resolver for cssSourceMap with new sourcemap format [bridge] (#​7541)
    • nuxt: Pass fully resolved path to nitro dist files (#​7494)
    • nuxt: Remove modulepreload for spa fallback routes with ssr:true (#​7553)
    • schema: Only disallow vite server port and host (#​7554)
    • nuxi, vite: Ipv6 support for nuxi dev (#​7560)
    • cli: Print resolved public directory after generate (#​7577)
    • nuxt: Load payload after middleware and once final route is resolved (#​7574)
    • nuxt: Keep state in the initial state instead of extracting it (#​7567)
    • vite: Normalize vite-node error data from server (#​7589)
    • vite: Include id and stack in vite-node fallback error handler (#​7575)
    • vite: Respect ctx.nuxt.options.modulesDir for resolving externals with vite-node (#​7612)
    • nuxt: Add missing process.client for early redirect in navigateTo(#​7625)
    • vite-node: Include importer in error stack (#​7607)
    • vite, webpack: Avoid generating keys where a key is already provided (#​7622)
    • vite, webpack: Handle auto keys for composables without args (#​7651)
    • nuxt: Don't tree shake client-only fallback templates (#​7659)
    • nuxt: Strip non-.vue extensions from component types (#​7673)
    • nuxt: Only observe tag elements for <NuxtLink> prefetching (#​7679)
    • nuxi, vite: Support HTTPS with custom domain and HMR (#​7680)
    πŸ“– Documentation
    • Update auto-imports link (#​7530)
    • Add note about link prefetching (#​7540)
    • Improve NuxtLink prefetch explanation (#​7540)
    • Add testing and addComponent to modules and update addImports (#​7543)
    • Fix typo on directory-structure/pages (#​7601)
    • Fix typo in custom router example (8621c860)
    • Fix typo in nitro options in wasm example (#​7639)
    • Add addImportsSources to list of kit utils (#​7636)
    • api: Add defineNuxtComponent page (#​7618)
    • testing: Move modules testing section to module authors guide (#​7643)
    • getting-started: Add views page (#​7556)
    ❀️ Contributors
    • Alexander Lichter
    • Alper Doğan
    • Chenying
    • ClΓ©ment Ollivier
    • Damian GΕ‚owala
    • Daniel Roe
    • Julien Huang
    • Krutie Patel
    • Lexpeartha
    • Pooya Parsa
    • YIngChenIt

    v3.0.0-rc.10

    Compare Source

    πŸ’¬ Join the release discussion

    πŸš€ How to Upgrade

    Note Make sure to recreate the lock file in the project in case of any issues after the upgrade.

    • Automated: npx nuxi@latest upgrade --force
    • Manual: Bump nuxt dependency to 3.0.0-rc.10 and then use npx nuxi@latest cleanup to cleanup any local caches
    ⭐ What is new?
    Critical Styles are Inlined

    #​6755, #​7160

    Global styles and used component styles are now automatically inlined when server-side rendering a page. This feature helps to improve the First Contentful Paint (FCP) metric.

    πŸ§ͺ You can disable the feature from nuxt.config using experimental: { inlineSSRStyles: false } in case of any issues.

    Full Static Generation with Payload Rendering

    #​6411, #​6455

    In Nuxt 2, we introduced an amazing feature called Full Static Generation. When using nuxt generate, the payload of each page containing asyncData and state is extracted to a .js chunk and we can deploy output to any static hosting without requiring a hosted API server. This feature also introduced performance benefits to reduce page size and allow smartly prefetching payload of next pages ahead of time when using nuxt generate but kept limited to it.

    This feature is now back in Nuxt 3 but much better! Payload is not only extracted during prerendering phase (nuxt generate) but also can be rendered on demand by simply appending /_payload.js to the end of any URL. This made implementation much simpler and also unlocks future development to enable payload rendering for hybrid static server and incremental generated pages. Followup #​6411 for the roadmap.

    Link Prefetching

    #​4329

    Another goodie ported from Nuxt 2, is automatically prefetching the next pages when a <NuxtLink> is in the viewport.

    This feature is integrated with vue-router to prefetch components of the next route and also payload extraction to prefetch the payload of the next pages ahead of time! You can also hook into link:prefetch to do more prefetches.

    Better Workspace Support

    unjs/pkg-types#​34, #​7439

    Nuxt has several configurations for directories including rootDir where nuxt.config, package.json, etc is, and srcDir which is the same as rootDir by default but can be customized to move project code such as pages/ to the src/ directory. With Monorepo becoming more popular, it became clear we need another new option to act smarter in a monorepo.

    We have introduced a new workspaceDir configuration. It is automatically detected from rootDir using different heuristics (how?). This option is used to extend the search path for node_modules via #​7439 but we will keep spreading its use in other places.

    πŸ§ͺ You can manually set workspaceDir from nuxt.config in case of any issues.

    defineNuxtConfig is Auto Imported

    #​7267, #​7485, #​7497

    Nuxt uses unjs/jiti in order to support typescript and ESM syntax for nuxt.config. When importing { defineNuxtConfig } from 'nuxt' in Nuxt 3, it causes the whole nuxt package to be loaded. It was making startup time slower.

    We have introduced a new nuxt/config subpath export that only exports defineNuxtConfig for type support but you don't even need this anymore! Just remove import and enjoy shorter syntax!

    -- import { defineNuxtConfig } from 'nuxt'
    export default defineNuxtConfig({
    })
    
    More Powerful nuxt init

    We have switched to unjs/giget for a much more powerful template init engine.

    Normally nuxi init command should work as it was before. If you were using nuxt init org/repo to clone the 3rd party GitHub repository, you should use nuxi init gh:org/repo now.

    Experimental Zero-Client-JS Mode

    #​7156, #​7248

    This new experimental flag allows turning off all Nuxt client js code when server-side rendering a page.

    Using this feature is advisable for the very small minority of sites that would not benefit from client-side JS.

    You can try this feature by setting experimental: { noScripts: true } and let us know what you think!


    Changelog

    ([see all commits](https://togithub.com/nuxt/f


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ‘» Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Support Library Mode

    Support Library Mode

    It would be amazing to support library mode using a custom, global Twind instance that can be used in both the Nuxt and Nitro contexts.

    If you point me in the right direction, I can certainly attempt to implement this into the module.

    Ref

    opened by tylerforesthauser 0
  • Dependency Dashboard

    Dependency Dashboard

    This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

    Open

    These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

    Detected dependencies

    github-actions
    .github/workflows/ci.yml
    • actions/checkout v3
    • actions/setup-node v3
    npm
    package.json
    • @nuxt/kit ^3.0.0-rc.8
    • defu ^6.0.0
    • twind ^1.0.0-next.38
    • @nuxtjs/eslint-config-typescript ^10.0.0
    • @twind/preset-tailwind ^1.0.0-next.38
    • eslint ^8.21.0
    • nuxt ^3.0.0-rc.8
    • standard-version ^9.5.0
    playground/package.json
    • @twind/preset-tailwind ^1.0.0-next.38
    • nuxt ^3.0.0-rc.8
    • nuxt-twind ^0.1.5

    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Headless UI A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Packages Name Version D

Tailwind Labs 18.4k Jan 4, 2023
Integrate Tauri in a Vite project to build cross-platform apps.

vite-plugin-tauri Integrate Tauri in a Vite project to build cross-platform apps Install Make sure to setup your environment for Tauri development. Th

Amr Bashir 95 Dec 15, 2022
Integrate Vite and Electron

vite-plugin-electron Integrate Vite and Electron Example ?? vite-plugin-electron-quick-start Usage vite.config.ts import electron from 'vite-plugin-el

null 217 Jan 2, 2023
This coc.nvim extension provides feature split from coc-volar

coc-volar-tools What' coc-volar-tools? This coc.nvim extension provides feature split from coc-volar. split into a separate coc-extension due to the l

yaegassy 8 Dec 14, 2022
⚑️ Minimal GraphQL Client + Code Generation for Nuxt

nuxt-graphql-client ⚑️ Minimal GraphQL Client + Code Generation for Nuxt ⚑️ Minimal GraphQL Client + Code Generation for Nuxt Features Zero Configurat

Dizzy 245 Dec 27, 2022
Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 πŸ“‹

nuxt-social-tags Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 ✨ Release Notes ?? Read the documentation Features Nuxt3 ready Composables

Conner 19 Dec 17, 2022
Easily connect your Nuxt 3 application with LogSnag πŸ“°

Nuxt LogSnag ?? LogSnag integration for Nuxt 3 ✨ Release Notes Features Nuxt 3 ready Easy integration Handy composables TypeScript support Setup Insta

Conner 13 Apr 28, 2022
Nuxt 3 starter with Algolia, Storyblok, and Indexer

Nuxt 3 with Storyblok CMS and Algolia Search (incl. automatic indexing) This is a demo repository for an article in Dev.to. We recommend to look at th

Jakub Andrzejewski 5 May 24, 2022
End-to-end typesafe APIs with tRPC.io in Nuxt applications.

tRPC-Nuxt End-to-end typesafe APIs with tRPC.io in Nuxt applications. The client above is not importing any code from the server, only its type declar

Robert Soriano 231 Dec 30, 2022
A modern, zero-dependency uptime monitoring tool & status page based on GitHub Actions & Nuxt Content v2.

StatusBase Uptime monitoring tool & beautiful status pages Powered by Nuxt Content v2! Free β€’ Open Source β€’ Notification View Demo Β· Report Bug Β· Requ

zernonia 208 Dec 27, 2022
πŸ”Ž Algolia module for Nuxt

@nuxtjs/algolia Algolia module for Nuxt ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Algolia Handy composable

Nuxt Community 128 Jan 7, 2023
Nuxt 3 module for Kirby's Query Language API

nuxt-kql Kirby KQL module for Nuxt 3. This module provides a useKql composable, which under the hood uses useFetch. Thus, KQL query fetching in your N

Johann Schopplich 25 Dec 15, 2022
This repo contains a fully configured nuxt 3 instance supporting TypeScript and several considered as useful libraries, fully configured and ready to use in real world projects!

Nuxt 3 Starter This repo contains a fully configured nuxt 3 instance supporting TypeScript and several considered as useful libraries, fully configure

Ali Soueidan 26 Dec 27, 2022
Batteries-included, zero-config Ionic integration for Nuxt

Nuxt Ionic Ionic integration for Nuxt ✨ Changelog ?? Read the documentation ▢️ Online playground Features ⚠️ nuxt-ionic is currently a work in progres

Daniel Roe 211 Dec 28, 2022
Http-proxy middleware for Nuxt 3.

nuxt-proxy Http-proxy middleware for Nuxt 3. Installation npm install nuxt-proxy Usage export default defineNuxtConfig({ modules: ['nuxt-proxy'],

Robert Soriano 49 Dec 30, 2022
Nuxt 3 module for Web3.js

nuxt-web3.js Nuxt 3 module for Web3.js. Installation npm install nuxt-web3.js Usage export default defineNuxtConfig({ modules: ['nuxt-web3.js'], })

Robert Soriano 8 Dec 16, 2022
OpenID-Connect(OIDC) integration module for nuxt 3.0.

Nuxt OpenID-Connect OpenID-Connect(OIDC) integration module for nuxt 3.0. Features An Nuxt 3 module. OIDC integration ( implemetation base openid-clie

Aborn Jiang 10 Dec 24, 2022
πŸ”Ž Meilisearch module for Nuxt 3

nuxt-meilisearch Meilisearch module for Nuxt Features Nuxt 3 Easy integration with MeilisearchJS lib Support for Vue Algolia Vue 3 InstantSearch compo

Alex Duval 50 Dec 26, 2022
A modern, zero-dependency uptime monitoring tool & status page based on GitHub Actions & Nuxt Content v2.

StatusBase Uptime monitoring tool & beautiful status pages Powered by Nuxt Content v2! Free β€’ Open Source β€’ Notification View Demo Β· Report Bug Β· Requ

StatusBase 194 Jul 5, 2022