{"id":14991039,"url":"https://github.com/longrun/tech-blog-vue3-nuxt3","last_synced_at":"2025-04-12T03:25:34.397Z","repository":{"id":38368404,"uuid":"478978600","full_name":"longrun/tech-blog-vue3-nuxt3","owner":"longrun","description":"Tech blog starter-kit with Vue 3, Nuxt 3 and Contentful","archived":false,"fork":false,"pushed_at":"2023-02-16T23:53:55.000Z","size":228850,"stargazers_count":49,"open_issues_count":8,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-25T23:03:37.585Z","etag":null,"topics":["blog","contentful","markdown","nuxt3","vue3"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/longrun.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-07T12:38:07.000Z","updated_at":"2025-03-17T09:38:40.000Z","dependencies_parsed_at":"2024-09-15T20:08:52.296Z","dependency_job_id":"201553aa-34fa-4504-a596-77a7bd12cdb8","html_url":"https://github.com/longrun/tech-blog-vue3-nuxt3","commit_stats":{"total_commits":97,"total_committers":3,"mean_commits":"32.333333333333336","dds":0.5154639175257731,"last_synced_commit":"1e872c8dccb4899ea3677330bf117da889229bec"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/longrun%2Ftech-blog-vue3-nuxt3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/longrun%2Ftech-blog-vue3-nuxt3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/longrun%2Ftech-blog-vue3-nuxt3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/longrun%2Ftech-blog-vue3-nuxt3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/longrun","download_url":"https://codeload.github.com/longrun/tech-blog-vue3-nuxt3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248511240,"owners_count":21116372,"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":["blog","contentful","markdown","nuxt3","vue3"],"created_at":"2024-09-24T14:21:21.737Z","updated_at":"2025-04-12T03:25:34.377Z","avatar_url":"https://github.com/longrun.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Tech blog starter-kit with Vue 3, Nuxt 3 and Contentful\n\n- Vue 3\n    - Every .vue files are written in [setup script](https://vuejs.org/api/sfc-script-setup.html)\n- Nuxt 3\n     - Using latest version, v3.0.0-rc.8\n     - Compliance the Nuxt 3 standard directory structure\n     - You can choose SSR or SSG, whichever you prefer!\n- TypeScript\n- Contentful for BFF\n- Tools: Vite, Yarn 3, Volar\n- Styles: [Primeflex](https://www.primefaces.org/primeflex/), [Primeicons](https://github.com/primefaces/primeicons), [markdown-it](https://github.com/markdown-it/markdown-it)\n\n## Features\n\nMinimal features.\n\n- Simple and clean markup and styling\n- Article is can wrote Markdown \n- Responsive layout for PC, Tablet, Smartphone\n- Image optimization - support WebP format / image lazy load\n- Lighthouse Hi-score\n- Perfect OGP resources setup\n- Support i18n\n- Support Google Analytics 4\n- of course, No Ad!\n\nTop Page | Article Page\n-- | --\n\u003cimg width=\"1345\" src=\"https://user-images.githubusercontent.com/15245958/166173789-cca850d3-80f7-4586-b887-bf85e599c114.png\"\u003e | \u003cimg width=\"1354\" src=\"https://user-images.githubusercontent.com/15245958/166173807-295251e7-ac2c-490f-8f53-96af00d348b5.png\"\u003e\n\u003cimg width=\"759\" src=\"https://user-images.githubusercontent.com/15245958/166173629-f6bf71b4-2e6b-4f5c-91b8-6eac17ed7f8b.png\"\u003e | \u003cimg width=\"773\" src=\"https://user-images.githubusercontent.com/15245958/166173633-80dc1607-038d-45be-a50b-f2c3c5a9cb43.png\"\u003e\n\n\n# Init\n\n- Install Node.js (recommend v16.17.0^)\n- Install VSCode extenstion of `Volar`\n- Do `yarn install`\n\n# Set up Contentful\n\nContent model setting example in this project.\n\n\u003cimg width=\"814\" alt=\"contentful-content-model\" src=\"https://user-images.githubusercontent.com/15245958/164967460-7ae9d188-79e6-44e1-b8e0-6b63dd1d21d0.png\"\u003e\n\nTag setting example in in this project. Navigation sort order can controlled by `:order=NUM`.\n\n\u003cimg width=\"1388\" alt=\"contentful-tag\" src=\"https://user-images.githubusercontent.com/15245958/167295104-ef86cd2b-620f-414b-a9be-c349f7315a8c.png\"\u003e\n\n# Setup env and configuration\n\nMake sure to rename file `.env.template` to `.env` and write Contentful Identify and Token.\n\n```\nCONTENTFUL_CONTENT_KEY=\u003cyour contentful Content Type id\u003e\nCONTENTFUL_SPACE_ID=\u003cyour contentful Space id\u003e\nCONTENTFUL_ACCESS_TOKEN=\u003cyour contentful Delivery API Key\u003e\n```\n\nIf you want Google Analytics, write GA_ID.\n\n```\nGA_ID=\u003cyour google analitycs tracking-id like G-XXXXXXXXX\u003e\n```\n\n# Change your site setting\n\nChange site settings in the nuxt.config.ts to yours.\n\n```\n  runtimeConfig: {\n    private: {\n      ...\n    },\n    public: {\n      compression: true,\n      DEFAUTL_LANGUAGE: 'ja',\n      HOST: process.env.NODE_ENV === 'production' ? 'https://longrun-engineer-blog.web.app' : 'http://localhost:3000',\n      APP_NAME: 'tech-blog-vue3-nuxt3',\n      APP_URL: 'https://github.com/longrun/tech-blog-vue3-nuxt3',\n      SITE_TITLE: 'LongRun Engineering',\n      SITE_TOP_DESCRIPTION: 'Our story begins here.',\n      TEAM_NAME: 'LongRun Inc.',\n      TEAM_WEBSITE_URL: 'https://longmayyou.run',\n      TEAM_STATEMENT: 'Creating a world where runners don\\'t have to give up',\n      TEAM_LOGO_IMAGE_ON_FOOTER: '/images/logo-white-bg_transparent-465x195.png',\n      TEAM_LOGO_BLACK: '/images/longrun-logo-black-600x315.png',\n      GITHUB_ORGANIZATION_URL: 'https://github.com/longrun',\n      GA_ID: process.env.GA_ID,\n      GA_APP_NAME: 'LongRun Blog',\n    },\n  },\n```\n\n# Start dev server\n\n```\nyarn dev\n```\n\nConguraturation 🎉\n\n\nDon't forget change `favicion.ico` and `appletouch-icon.png` in the ~/public directory to yours.\n\n\n# Build for SSG\n\nCheck config is equals to `ssr:true` and `target:static` in `nuxt.config.ts`.\n\n```\nexport default defineNuxtConfig({\n  ssr: true,\n  target: 'static',\n  ...\n```\n\nGenerate of files.\n\n```\nyarn generate\n```\n\nAnd you can find more deployment information from https://nuxtjs.org/deployments/\n\n# Build for SSR\n\nCheck config is equals to `ssr:true` and `target:server` in `nuxt.config.ts`.\n\n```\nexport default defineNuxtConfig({\n  ssr: true,\n  target: 'server',\n  ...\n```\n\nBuild and start local server.\n\n```\nyarn build\nyarn start\n```\n\n# Package upgrade\n\n```\nyarn upgrade-interactive\n```\n\n# LICENSE\n\n- [MIT LICENSE](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flongrun%2Ftech-blog-vue3-nuxt3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flongrun%2Ftech-blog-vue3-nuxt3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flongrun%2Ftech-blog-vue3-nuxt3/lists"}