{"id":24572838,"url":"https://github.com/lithos-hub/nuxt-migration-exercise","last_synced_at":"2026-01-03T06:57:55.340Z","repository":{"id":183380386,"uuid":"670037399","full_name":"Lithos-hub/nuxt-migration-exercise","owner":"Lithos-hub","description":"Migration exercise from Nuxt 2 to Nuxt 3","archived":false,"fork":false,"pushed_at":"2023-07-24T15:58:24.000Z","size":953,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-23T19:44:43.234Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lithos-hub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-24T06:48:55.000Z","updated_at":"2023-07-24T06:49:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"bf2ec3d0-b83b-4074-a56e-28b9c16d4feb","html_url":"https://github.com/Lithos-hub/nuxt-migration-exercise","commit_stats":null,"previous_names":["lithos-hub/nuxt-migration-exercise"],"tags_count":0,"template":false,"template_full_name":"thecodeorigin/nuxt-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lithos-hub%2Fnuxt-migration-exercise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lithos-hub%2Fnuxt-migration-exercise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lithos-hub%2Fnuxt-migration-exercise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lithos-hub%2Fnuxt-migration-exercise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lithos-hub","download_url":"https://codeload.github.com/Lithos-hub/nuxt-migration-exercise/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244014165,"owners_count":20383715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-23T19:44:49.883Z","updated_at":"2026-01-03T06:57:55.294Z","avatar_url":"https://github.com/Lithos-hub.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nuxt-template\n\n## Build Setup\n\n```bash\n# prepare configurations\n$ yarn prepare\n\n# install dependencies\n$ yarn install\n\n# serve with hot reload at localhost:3000\n$ yarn dev\n\n# build for production and launch server\n$ yarn build\n$ yarn start\n\n# generate static project\n$ yarn generate\n```\n\nFor detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).\n\n## Snippets\n\nCheckout .vscode for code snippets\n\nThe project is setup with some simple i18n snippets:\n\n```javascript\n$t('');\n$i18n.$t('');\ni18n.t('');\n```\n\n```yaml\n\u003ci18n lang=\"yaml\"\u003e\nfr:\n  Your code: Votre code\n\u003c/i18n\u003e\n```\n\n## Directories\n\nYou can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.\n\n### `components`\n\nThe components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.\n\n#### `components/base`\n\nComponents in this directory will be registered globally automatically by this configuration in `nuxt.config.js`:\n\n```javascript\ncomponents: [\n  { path: '@/components/base/' },\n],\n```\n\n#### `components/layout`\n\nThe directory to store your common layout component, such as `Navbar`, `Sidebar`, `Header`, `Footer`, `etc`\n\n#### `components/*`\n\nPlace your modules' components, good naming pratice should be something like:\n\n```javascript\n// components/products/Chart.vue\n// components/blogs/BlogItem.vue\n```\n\n### `constants`\n\nThis directory should should contains your project's constants, enums Javascript doesn't support `ENUM` type so we can use `Object.freeze()` to create a true ENUM object.\n\n### `core/config`\n\nOur plugins' configuration should be in here, the `nuxt.config.js` file or in special dedicated files like `.eslintrc.js`, `.prettierrc.js`\n\n### `core/layouts`\n\nLayouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).\n\n### `core/middleware`\n\nThe middleware directory contains your application middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layout).\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/middleware).\n\n### `core/mixins`\n\nThis folder contains Vue mixins\n\nWe can declare a global mixin with:\n\n```javascript\nimport Vue from 'vue';\n\nVue.mixin({\n  created() {\n    var myOption = this.$options.myOption;\n    if (myOption) {\n      console.log(myOption);\n    }\n  },\n});\n```\n\nand import it as a plugin in `nuxt.config.js` or simple export an on-demand mixin in here:\n\n```javascript\nexport const myHelpfulMixin = {\n  created() {\n    var myOption = this.$options.myOption;\n    if (myOption) {\n      console.log(myOption);\n    }\n  },\n};\n```\n\n### `core/plugins`\n\nThe plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).\n\n### `core/styles`\n\nThis folder contains `css` and `scss` files, scss files, `variables`, `mixins` and `functions` also got imported to the project globally by using this configuration in `nuxt.config.js`:\n\n```javascript\nbuildModules: [\n  // https://www.npmjs.com/package/@nuxtjs/style-resources\n  '@nuxtjs/style-resources',\n],\n\nstyleResources: {\n  scss: [\n    '@/core/styles/scss/_colors.scss',\n    '@/core/styles/scss/_mixins.scss',\n    '@/core/styles/scss/_variables.scss',\n  ],\n  hoistUseStatements: true,\n},\n```\n\n### `core/use`\n\nThis directory contains composables files for `composition API` For more information about Vue composition API, please check out the [Vue composition API documentation](https://v3.vuejs.org/guide/composition-api-introduction.html)\n\nNotes:\n\n- Yes, you can ignore Composition API if you like the original option API better.\n\n```javascript\n// Option API component:\nexport default {\n  data() {\n    return {\n      blogs: 123,\n      categories: 456,\n    }\n  },\n  created() {},\n  mounted() {},\n}\n\n// Composition API\nexport default {\n  setup(props, context) {\n    // No created hook, setup runs in server-side\n    const dataBlog = reactive({\n      blogs: 123,\n    })\n\n    const dataCategory = reactive({\n      categories: 456,\n    })\n\n    onMounted(() =\u003e {\n      // Do stuff when component mounted\n    })\n\n    return {\n      dataBlog,\n      dataCategory,\n    }\n  }\n}\n```\n\n- Vue 2 and Vue 3 Composition API are \"almost\" the same.\n- Nuxt has supercharged Vue Composition API with some cooler features, see [the documentation](https://composition-api.nuxtjs.org/getting-started/introduction).\n\n### `core/utils`\n\nThis directory contains your helper functions, global mixins, global dicrectives and global filters\n\n`/directives`, `/mixins` and `/filters` are automatically registered using Webpack's `require.context()`.\n\nFiles in `/functions` are imported manually when use to keep the type annotation\n\n### `locale`\n\nThis directory contains your global localization and will be imported into `nuxt.config.js`. We're using `YAML` file because it has better syntax than `JSON`\n\nNotes: We translate the website on the go by adding localization on component-level\n\n```html\n\u003ctemplate\u003e\n  \u003ch1\u003e{{ $t('Home page') }}\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { useContext } from '@nuxtjs/composition-api';\n  export default {\n    // Composition API\n    setup() {\n      const { i18n } = useContext();\n\n      console.log(i18n.t('Hello world!'));\n    },\n\n    // Option API\n    mounted() {\n      console.log(this.$t('Hello world!'));\n    },\n  };\n\u003c/script\u003e\n\n\u003ci18n lang=\"yaml\"\u003e\n  vi: Home page: Trang chủ Hello world!: Xin chào thế giới! Change language: Đổi\n  ngôn ngữ\n\u003c/i18n\u003e\n```\n\n### `pages`\n\nThis directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).\n\n### `server/*`\n\nAPI Routes using Nuxt `serverMiddleware` so you can protect your original API\n\nThis using Nuxt.js server middleware and added in `nuxt.config.js`:\n\n```javascript\nserverMiddleware: [\n  { path: '/api/v1', handler: '@/server' },\n],\n```\n\nRead more about Nuxt.js server middleware in [the documentation](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-servermiddleware).\n\n### `static`\n\nThis directory contains your static files. Each file inside this directory is mapped to `/`.\n\nExample: `/static/robots.txt` is mapped as `/robots.txt`.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).\n\n### `store`\n\nThis directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.\n\nMore information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).\n\n### `store-lazy`\n\nThis directory contains your dynamic modules for Vuex.\n\nSee more information about Vue Dynamic module registeration in [the documentation](https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flithos-hub%2Fnuxt-migration-exercise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flithos-hub%2Fnuxt-migration-exercise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flithos-hub%2Fnuxt-migration-exercise/lists"}