Nuxt.js Template using TypeScript Sass, i18n, SSR on Firebase Cloud Functions

A Nuxt.js Template using below:

1. Nuxt.js
2. TypeScript
3. Sass
4. Buefy: is integrate Bulma
5. nuxt-i18n: is integrate vue-i18n and vue-i18n-loader
6. Sitemap Modules
7. Google Analitics Module
8. SSR on Firebase Cloud Functions
9. Auto Deploy using CirecleCI

Motivation

nuxt and nuxt-i18n are GREATE softoware, but difficult to set up...
Therefore, we have put together one template and frequently used ones so that projects corresponding to SEO and internationalization can be launched easily.

Install

Please checkout or download this repository.

Setup

env.js

Please change your confingures for env.development.js and env.production.js.

• env.development.js ... use in development mode; ex. nuxt command
• env.production.js ... use in production mode; ex. nuxt build command

module.exports = {
  baseUrl: "http://localhost:3000",
  contactFormUrl: "TODO_YOUR_CONTACT_FORM_URL",
  policyUrl: "TODO_YOUR_PRIVACY_POLICY_URL",
  tosUrl: "TODO_YOUR_TERMS_OF_SERVICE_URL",
  twitterUrl: "TODO_YOUR_TWITTER_URL",
  firebaseConfig: "TODO_YOUR_FIREBASE_CONFIG",
  GA_ID: "TODO_YOUR_GOOGLE_ANALYTICS_ID"
};

Each values is:

• baseUrl: base URL of your site
• contactFormUrl: contact form URL for your site
• policyUrl: privacy policy page for your site
• tosUrl: terms of service page for your site
• twitterUrl: twitter URL for you
• firebaseConfig: firebase config json for you
• GA_ID: Google Analitics Tracking ID for you

commonHead.js

commonHead.js is described common html head.
Please change the following variables according to your setting.
Default values is:

const keyword = "MemoryLovers,めもらば";
const copryright = "© 2019 Memory Lovers.";
const twitterId = "@MemoryLoverz";

.circleci/config.yml

commonHead.js is described config for Cirecle CI.
Please change the following variables according to your setting.

environment:
  FIREBASE_PROJECT: YOUR_FIREBASE_PROJECT_ID
  FIREBASE_TOKEN: YOUR_FIREBASE_TOKEN

Usage

Commands

Dev

# launch dev mode
npm run dev

Build

# build
$ npm run build

Serve

# build & launch firebase serve
$ npm run build && npm run serve

Deploy

# if you need
$ firebase use

# build & deploy
$ npm run build && npm run deploy

Customize

Custome Scss for Buefy

Please see app/assets/css/buefy.scss.

Change Messages

Please see app/assets/msg/common.json
And, you can use <i18n> in each .vue files. Please see vue-i18n-loader.

Change HTML Head

Please see:

1. commonHead.js ... Common HTML head: use in all pages.
2. app/mixins/HeadMixinx.ts ... mixins HTML head: use in each pages.

HeadMixinx.ts generates HTML head based on headInfo(): HeadInfo of each page.

ex: headInfo() of IndexPage return message keys of title adn description.

export default class IndexPage extends mixins(HeadMixin) {
  name:string = 'HomePage';

  public headInfo(): HeadInfo {
    return {
      title: "home_title",
      description: "home_details"
    };
  }
}

Licence

MIT

Author

Memory Lovers (GitHub / WebSite / Twitter)

PR

We develop Trans-Notes is web service.

Trans-Notes is a web service with the following features:

1. Tanslate multi language at once
2. Manage base message and translated messages
3. Export multi format: ex. Android XML, CSV and "nuxt-i18n JSON"!!

We think that using Trans-Notes makes internationalization easier.
Sorry, we don't ready English version yet.. Now we are preparing an English version.
Please try it!!