UKKIDOKI/tech-blog-vue3-nuxt3

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

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

• Vue 3
  • Every .vue files are written in setup script
• 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.

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

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

• MIT LICENSE