React to Nuxt Migration Guide

Migrating from React to Nuxt (a Vue.js framework) involves understanding the equivalent concepts and patterns in Vue.js. Here is a quick migration guide that maps React concepts to their counterparts in Nuxt:

React to Nuxt Migration Guide

1. useEffect

   React:

   1
   2
   3
   useEffect(() => {
     // Side effects here
   }, [dependencies]);
   

   Nuxt (Vue Composition API):

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   import { onMounted, watch, ref } from 'vue';
   
   export default {
     setup() {
       const state = ref(null);
   
       onMounted(() => {
         // Side effects here
       });
   
       watch(() => state.value, (newValue, oldValue) => {
         // Respond to state changes
       });
   
       return { state };
     }
   }
   

   Nuxt (Options API):

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   export default {
     data() {
       return {
         state: null
       };
     },
     mounted() {
       // Side effects here
     },
     watch: {
       state(newValue, oldValue) {
         // Respond to state changes
       }
     }
   }
   

2. useMemo

   React:

   1
   const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
   

   Nuxt (Vue Composition API with computed):

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   import { computed } from 'vue';
   
   export default {
     setup() {
       const a = ref(1);
       const b = ref(2);
       const memoizedValue = computed(() => computeExpensiveValue(a.value, b.value));
   
       return { a, b, memoizedValue };
     }
   }
   

3. useState

   React:

   1
   const [state, setState] = useState(initialState);
   

   Nuxt (Vue Composition API with ref or reactive):

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   import { ref, reactive } from 'vue';
   
   export default {
     setup() {
       const state = ref(initialState);
   
       const setState = (newState) => {
         state.value = newState;
       };
   
       return { state, setState };
     }
   }
   

   Nuxt (Options API with data):

   1
   2
   3
   4
   5
   6
   7
   export default {
     data() {
       return {
         state: initialState
       };
     }
   }
   

4. Component Lifecycle

   React:

   1
   2
   3
   4
   5
   6
   7
   useEffect(() => {
     // Component did mount
   
     return () => {
       // Component will unmount
     };
   }, []);
   

   Nuxt (Vue Composition API with onMounted and onBeforeUnmount):

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   import { onMounted, onBeforeUnmount } from 'vue';
   
   export default {
     setup() {
       onMounted(() => {
         // Component did mount
       });
   
       onBeforeUnmount(() => {
         // Component will unmount
       });
   
       return {};
     }
   }
   

   Nuxt (Options API with lifecycle hooks):

   1
   2
   3
   4
   5
   6
   7
   8
   export default {
     mounted() {
       // Component did mount
     },
     beforeDestroy() {
       // Component will unmount
     }
   }
   

5. Routing

   React (React Router):

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   
   const App = () => (
     <Router>
       <Switch>
         <Route path="/home" component={Home} />
         <Route path="/about" component={About} />
       </Switch>
     </Router>
   );
   

   Nuxt: Nuxt uses a file-based routing system where the structure of your pages directory defines the routes.

   pages/index.vue:

   1
   2
   3
   <template>
     <div>Home Page</div>
   </template>
   

   pages/about.vue:

   1
   2
   3
   <template>
     <div>About Page</div>
   </template>
   

   The routes / and /about are automatically generated by Nuxt.

6. Context (useContext)

   React:

   1
   2
   3
   4
   5
   6
   const MyContext = React.createContext(defaultValue);
   
   const MyComponent = () => {
     const contextValue = useContext(MyContext);
     return <div>{contextValue}</div>;
   };
   

   Nuxt (Provide/Inject in Vue):

   1
   2
   3
   4
   5
   6
   7
   8
   9
   // Parent Component
   import { provide } from 'vue';
   
   export default {
     setup() {
       provide('myContext', 'someValue');
       return {};
     }
   };
   

   1
   2
   3
   4
   5
   6
   7
   8
   9
   // Child Component
   import { inject } from 'vue';
   
   export default {
     setup() {
       const contextValue = inject('myContext');
       return { contextValue };
     }
   };
   

Summary

• Lifecycle Hooks: Use onMounted, onBeforeUnmount, and other Vue lifecycle hooks.
• State Management: Use ref and reactive for state management.
• Computed Properties: Use computed for memoization.
• Routing: Use Nuxt’s file-based routing system.
• Context: Use Vue’s provide and inject.

Nuxt leverages Vue 3’s Composition API and provides a powerful framework for server-side rendering, static site generation, and more, making it a robust alternative to React.