### Vuex 3.x to 4.x Migration

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Guides the migration from Vuex 3.x to 4.x, including changes to `Vue.use` and store instantiation. Implemented using `new-global-api` and `vuex-v4` codemods.

```javascript
Vue.use(Vuex) & new Vue({ store })
-> 
app.use(store)
```

```javascript
new Store()
-> 
createStore()
```

--------------------------------

### Fix v-bind's .sync with v-model Argument (ESLint)

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

This ESLint rule detects and fixes the deprecated v-bind's .sync modifier, suggesting the use of a v-model argument instead. Ensure eslint-plugin-vue is installed and configured.

```javascript
vue/no-deprecated-v-bind-sync
```

--------------------------------

### Transform new Vue() to createApp()

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Migrates `new Vue()` to `Vue.createApp()` and handles related mounting syntax.

```javascript
new Vue({ el })
```

```javascript
new Vue().$mount
```

```javascript
new HelloWorld({ el })
```

```javascript
new HelloWorld().$mount
```

```javascript
Vue.createApp().mount
```

```javascript
createApp(HelloWorld).mount
```

--------------------------------

### Run vue-codemod from Command Line

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Execute codemod transformations on specified paths. Use --params for transformation-specific arguments and --dry for a dry run.

```bash
npx vue-codemod <path> -t <transformation> --params [transformation params] [...additional options]
```

--------------------------------

### Import Vue as namespace

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Transforms `import Vue from 'vue'` to `import * as Vue from 'vue'` for Vue 3's global API treeshaking.

```javascript
import Vue from 'vue'
```

```javascript
import * as Vue from 'vue'
```

--------------------------------

### Migrate global APIs to per-app APIs

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Transforms global Vue APIs like `Vue.config`, `Vue.use`, `Vue.mixin`, etc., to their per-app equivalents, such as `app.config` or `app.use`.

```javascript
Vue.config
```

```javascript
Vue.use
```

```javascript
Vue.mixin
```

```javascript
Vue.component
```

```javascript
Vue.directive
```

```javascript
app.**
```

--------------------------------

### Import Composition API from Vue

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Replaces imports from '@vue/composition-api' with 'vue'. This codemod is named `import-composition-api-from-vue`.

```javascript
import ... from '@vue/composition-api'
-> 
import ... from 'vue'
```

--------------------------------

### Remove keyCode Support in v-on (ESLint)

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

This ESLint rule addresses the removal of keyCode support in v-on. It flags deprecated usage and can be fixed automatically. Configuration for compat build is also mentioned.

```javascript
vue/no-deprecated-v-on-number-modifiers
```

--------------------------------

### Programmatic API for Transformations

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Apply transformations programmatically using the runTransformation function. This is useful for integrating codemods into build processes or other tools.

```javascript
runTransformation(fileInfo, transformation, params)
```

--------------------------------

### Transform render(h) to render() and import h

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Adjusts render functions by removing the contextual `h` parameter and adding `import { h } from 'vue'`.

```javascript
render(h)
```

```javascript
render()
```

```javascript
import { h } from 'vue'
```

--------------------------------

### Vue Class Component 7.x to 8.x Upgrade

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Handles the upgrade from `vue-class-component` 7.x to 8.x, including changes to component import and hook registration. Pay attention to potential name collisions with `Vue`.

```typescript
import { Component } from 'vue-class-component'
-> 
import { Options as Component } from 'vue-class-component'
```

```typescript
import Vue from 'vue'
-> 
import { Vue } from 'vue-class-component'
```

```typescript
Component.registerHooks
-> 
Vue.registerHooks
```

--------------------------------

### Vue Router 3.x to 4.x Migration

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Facilitates migration from Vue Router 3.x to 4.x, covering global API usage, router instantiation, and history mode configuration. Implemented using `new-global-api` and `vue-router-v4` codemods.

```javascript
Vue.use(VueRouter) & new Vue({ router })
-> 
app.use(router)
```

```javascript
new VueRouter()
-> 
createRouter()
```

```javascript
mode: 'history', base: BASE_URL
-> 
history: createWebHistory(BASE_URL)
```

--------------------------------

### Apply Git Diff with Ignored Blank Lines

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

This command helps to ignore whitespace changes when staging modified files after running transformations, ensuring cleaner git history.

```sh
git diff --ignore-blank-lines | git apply --cached
```

--------------------------------

### Transform Vue.extend to defineComponent

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Replaces `Vue.extend` with `defineComponent` as part of the global API changes in Vue 3.

```javascript
Vue.extend
```

```javascript
defineComponent
```

--------------------------------

### Migrate Vue.prototype custom properties

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Updates `Vue.prototype.customProperty` to `app.config.globalProperties.customProperty` for global property access in Vue 3.

```javascript
Vue.prototype.customProperty
```

```javascript
app.config.globalProperties.customProperty
```

--------------------------------

### Migrate Vue.config.ignoredElements

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Transforms `Vue.config.ignoredElements` to `app.config.isCustomElement` for handling custom element configurations in Vue 3.

```javascript
Vue.config.ignoredElements
```

```javascript
app.config.isCustomElement
```

--------------------------------

### Transform scoped-slots to slots

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Replaces `this.$scopedSlots` with `this.$slots` to align with Vue 3's slot unification. Ensure ESLint rules `vue/no-deprecated-slot-attribute` and `vue/no-deprecated-slot-scope-attribute` pass before running.

```javascript
this.$scopedSlots
```

--------------------------------

### Remove Vue.config.productionTip

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Removes the `Vue.config.productionTip` configuration, which is no longer used in Vue 3.

```javascript
Vue.config.productionTip
```

--------------------------------

### Convert custom directive hooks

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

Renames custom directive hooks from Vue 2 syntax (`bind`, `inserted`, `update`, `componentUpdated`, `unbind`) to Vue 3 syntax (`beforeMount`, `mounted`, `updated`, `unmounted`). It also removes the `update` hook and adds a comment noting the change.

```javascript
bind
```

```javascript
inserted
```

```javascript
update
```

```javascript
componentUpdated
```

```javascript
unbind
```

```javascript
beforeMount
```

```javascript
mounted
```

```javascript
updated
```

```javascript
unmounted
```

--------------------------------

### Remove data Object Declaration (ESLint)

Source: https://github.com/vuejs/vue-codemod/blob/main/README.md

These ESLint rules help in removing the deprecated data object declaration in Vue components. They identify shared component data issues and deprecated declaration patterns.

```javascript
vue/no-shared-component-data
```

```javascript
vue/no-deprecated-data-object-declaration
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.