/tech-blog-vue3-nuxt3

Tech blog starter-kit with Vue 3, Nuxt 3 and Contentful

Primary LanguageVueMIT LicenseMIT

Tech blog starter-kit with Vue 3, Nuxt 3 and Contentful

  • Vue 3
  • Nuxt 3
    • Using latest version, v3.0.0-rc.8
    • Compliance the Nuxt 3 standard directory structure
    • You can choose SSR or SSG, whichever you prefer!
  • TypeScript
  • Contentful for BFF
  • Tools: Vite, Yarn 3, Volar
  • Styles: Primeflex, Primeicons, markdown-it

Features

Minimal features.

  • Simple and clean markup and styling
  • Article is can wrote Markdown
  • Responsive layout for PC, Tablet, Smartphone
  • Image optimization - support WebP format / image lazy load
  • Lighthouse Hi-score
  • Perfect OGP resources setup
  • Support i18n
  • Support Google Analytics 4
  • of course, No Ad!
Top Page Article Page

Init

  • Install Node.js (recommend v16.17.0^)
  • Install VSCode extenstion of Volar
  • Do yarn install

Set up Contentful

Content model setting example in this project.

contentful-content-model

Tag setting example in in this project. Navigation sort order can controlled by :order=NUM.

contentful-tag

Setup env and configuration

Make sure to rename file .env.template to .env and write Contentful Identify and Token.

CONTENTFUL_CONTENT_KEY=<your contentful Content Type id>
CONTENTFUL_SPACE_ID=<your contentful Space id>
CONTENTFUL_ACCESS_TOKEN=<your contentful Delivery API Key>

If you want Google Analytics, write GA_ID.

GA_ID=<your google analitycs tracking-id like G-XXXXXXXXX>

Change your site setting

Change site settings in the nuxt.config.ts to yours.

  runtimeConfig: {
    private: {
      ...
    },
    public: {
      compression: true,
      DEFAUTL_LANGUAGE: 'ja',
      HOST: process.env.NODE_ENV === 'production' ? 'https://longrun-engineer-blog.web.app' : 'http://localhost:3000',
      APP_NAME: 'tech-blog-vue3-nuxt3',
      APP_URL: 'https://github.com/longrun/tech-blog-vue3-nuxt3',
      SITE_TITLE: 'LongRun Engineering',
      SITE_TOP_DESCRIPTION: 'Our story begins here.',
      TEAM_NAME: 'LongRun Inc.',
      TEAM_WEBSITE_URL: 'https://longmayyou.run',
      TEAM_STATEMENT: 'Creating a world where runners don\'t have to give up',
      TEAM_LOGO_IMAGE_ON_FOOTER: '/images/logo-white-bg_transparent-465x195.png',
      TEAM_LOGO_BLACK: '/images/longrun-logo-black-600x315.png',
      GITHUB_ORGANIZATION_URL: 'https://github.com/longrun',
      GA_ID: process.env.GA_ID,
      GA_APP_NAME: 'LongRun Blog',
    },
  },

Start dev server

yarn dev

Conguraturation 🎉

Don't forget change favicion.ico and appletouch-icon.png in the ~/public directory to yours.

Build for SSG

Check config is equals to ssr:true and target:static in nuxt.config.ts.

export default defineNuxtConfig({
  ssr: true,
  target: 'static',
  ...

Generate of files.

yarn generate

And you can find more deployment information from https://nuxtjs.org/deployments/

Build for SSR

Check config is equals to ssr:true and target:server in nuxt.config.ts.

export default defineNuxtConfig({
  ssr: true,
  target: 'server',
  ...

Build and start local server.

yarn build
yarn start

Package upgrade

yarn upgrade-interactive

LICENSE