Assess, plan, evolve.

Updates the file structure of a Nuxt.js project when migrating from v3 to v4. This codemod will migrate to the new file structure introduced in Nuxt.js v4. The new file structure is more modular and allows for better organization of the project. If you have any customizations related to the file structure, like `srcDir`, `serverDir`, `appDir`, `dir` - you will need to revert them back to the default values. This codemod will: 1. Move `assets`, `components`, `composables`, `layouts`, `middleware`, `pages`, `plugins`, `utils` directories to the `app` directory. 2. Move `app.vue`, `error.vue`, `app.config.ts` to the `app` directory. 3. Update relative imports in the project.

This codemod converts paths emitted by Nuxt's builder:watch hook from relative to absolute, enhancing support for external directories and complex patterns. 🚦 **Impact Level**: Minimal ## What Changed The Nuxt `builder:watch` hook now emits a path that is absolute rather than relative to your project `srcDir`. ## Reasons for Change This change allows support for watching paths that are outside your `srcDir`, and offers better support for layers and other more complex patterns. ## Before ```jsx nuxt.hook("builder:watch", (event, path) => { someFunction(); }); ``` ## After ```jsx nuxt.hook("builder:watch", (event, path) => { path = relative(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path)); refreshFunction(); }); ```

This recipe is a set of codemods that will help migrate to Nuxt 4. The recipe includes the following codemods: - nuxt/4/absolute-watch-path - nuxt/4/default-data-error-value - nuxt/4/deprecated-dedupe-value - nuxt/4/file-structure - nuxt/4/shallow-function-reactivity - nuxt/4/template-compilation-changes

This codemod removes deprecated boolean values for the dedupe option in refresh calls, replacing them with string literals cancel and defer 🚦 **Impact Level**: Minimal ## What Changed Previously, it was possible to pass `dedupe: boolean` to `refresh`. These were aliases of `cancel` (true) and `defer` (false). ## Before ```jsx const { refresh } = await useAsyncData(async () => ({ message: "Hello, Nuxt 3!", })); async function refreshData() { await refresh({ dedupe: true }); await refresh({ dedupe: false }); } ``` ## After ```jsx const { refresh } = await useAsyncData(async () => ({ message: "Hello, Nuxt 3!", })); async function refreshData() { await refresh({ dedupe: "cancel" }); await refresh({ dedupe: "defer" }); } ```

# Feature Documentation: Updating `null` Comparisons to `undefined` ## Overview Default `data` and `error` values in `useAsyncData` and `useFetch` ### What Changed The `data` and `error` objects returned from `useAsyncData` and `useFetch` will now default to `undefined`. ## Before and After Examples ### Before ```javascript const { data, error } = useAsyncData( () => client.value.v1.lists.$select(list.value).fetch(), { default: () => shallowRef(), }, ); if (data.value === null) { // Handle case where data is null } let x = data.value === null ? "No Data" : error.value === null ? "Error" : "Data Available"; ``` ### After ```javascript const { data, error } = useAsyncData( () => client.value.v1.lists.$select(list.value).fetch(), { default: () => shallowRef(), }, ); if (data.value === undefined) { // Handle case where data is undefined } let x = data.value === undefined ? "No Data" : error.value === undefined ? "Error" : "Data Available"; ```

This codemod removes lodash/template and related template utilities from Nuxt in favor of a more flexible and secure getContents() function for code generation in v3. ### What Changed Previously, Nuxt used `lodash/template` to compile templates located on the file system using the `.ejs` file format/syntax. Additionally, Nuxt provided some template utilities (`serialize`, `importName`, `importSources`) for code generation within these templates. These utilities are now being removed. ### Reasons for Change In Nuxt v3, we moved to a 'virtual' syntax with a `getContents()` function, which is much more flexible and performant. Additionally, `lodash/template` has had multiple security issues. Although these issues do not apply to Nuxt projects since it is used at build-time and by trusted code, they still appear in security audits. Moreover, `lodash` is a hefty dependency and is unused by most projects. ### Before ```js addTemplate({ fileName: "appinsights-vue.js", options: { /* some options */ }, src: resolver.resolve("./runtime/plugin.ejs"), }); ``` ### After ```js import { template } from "lodash-es"; import { readFileSync } from "node:fs"; addTemplate({ fileName: "appinsights-vue.js", options: { /* some options */ }, getContents({ options }) { const contents = readFileSync( resolver.resolve("./runtime/plugin.ejs"), "utf-8", ); return template(contents)({ options }); }, }); ``` > This change applies to all templates using .ejs file format/syntax.

This codemod transforms the `data` object returned from `useAsyncData`, `useFetch`, `useLazyAsyncData` and `useLazyFetch` into a `shallowRef` When new data is fetched, anything depending on `data` will still be reactive because the entire object is replaced. But if your code changes a property within that data structure, this will not trigger any reactivity in your app. This brings a significant performance improvement for deeply nested objects and arrays because Vue does not need to watch every single property/array for modification. In most cases, data should also be immutable. ## Before ```jsx const { data } = useFetch("/api/test"); ``` > This can apply to all useAsyncData, useFetch, useLazyAsyncData and useLazyFetch. ## After ```jsx const { data } = useFetch("/api/test", { deep: true }); ``` ### Additional Feature This codemod ensures that any unique key of your data is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch data related to a particular page, it should be changed to a key that uniquely matches that data. (`useFetch` should do this automatically for you.) ### Example Code before transformation: ```jsx const route = useRoute(); const { data } = await useAsyncData(async () => { return await $fetch(`/api/my-page/${route.params.slug}`); }); ``` Code after transformation: ```jsx const route = useRoute(); const { data } = await useAsyncData(route.params.slug, async () => { return await $fetch(`/api/my-page/${route.params.slug}`), { deep: true }; }); ```

Convert Nuxt.js Config to defineNuxtConfig This codemod helps you migrate your Nuxt.js configuration files to use the new `defineNuxtConfig` format. This is useful when updating to a newer version of Nuxt.js that supports this method for defining configuration. The codemod transforms the existing `export default` Nuxt.js configuration objects into the `defineNuxtConfig` function call. This standardizes the configuration format and ensures compatibility with the latest Nuxt.js features. Example Transformations Below are some examples demonstrating how the codemod transforms the configuration: ### Example 1 **Before:** ```ts export default { // ... }; ``` **After** ```ts export default defineNuxtConfig({ // ... }); ```

Convert Nuxt.js Config to defineNuxtConfig This codemod helps you migrate your Nuxt.js configuration files to use the new `defineNuxtConfig` format. This is useful when updating to a newer version of Nuxt.js that supports this method for defining configuration. The codemod transforms the existing `export default` Nuxt.js configuration objects into the `defineNuxtConfig` function call. This standardizes the configuration format and ensures compatibility with the latest Nuxt.js features. Example Transformations Below are some examples demonstrating how the codemod transforms the configuration: ### Example 1 **Before:** ```ts export default { // ... }; ``` **After** ```ts export default defineNuxtConfig({ // ... }); ```