nuxt-typo3

# 2. Bootstrap the frontend application

Let's start with the frontend. In this phase we will provide a frontend application based on Nuxt.js (opens new window).

# 1. Nuxt.js installation

The easiest way to start building a frontend application for a TYPO3 headless project is to use the CLI (opens new window) which we provide.

# Scaffold project

Run the following command in the console:

$ yarn create nuxt-typo3 <project-name>

Then answer these questions and choose your preferred technologies:

  1. Project name - provide name for package.json
  2. Project description - provide description for package.json
  3. Author name - provide author for package.json
  4. Choose the package manager:
  • Yarn
  • Npm
  1. Choose UI framework:
  • None (feel free to add one later)
  • Bootstrap
  • Vuetify
  • Bulma
  • Tailwind
  • Element UI
  • Ant Design Vue
  • Buefy
  • iView
  • Tachyons
  1. Choose one of the integrated server-side frameworks
  • None (Nuxt default server)
  • Express
  • Koa
  • Hapi
  • Feathers
  • Micro
  • Fastify
  • Adonis (WIP)
  1. Choose Nuxt.js module
  • TYPO3 checked by default
  • Axios - Plugin for Ajax requests.
  • Progressive Web App (PWA) Support checked by default
  1. Your TYPO3 API Url - Provide your TYPO3 headless address
  2. Choose linting tools:
  • ESLint recommended
  • Prettier recommended
  • Lint staged files recommended
  1. Choose test framework:
  • None (feel free to add one later)
  • Jest
  • AVA
  1. Choose rendering mode
  • Universal (SSR) checked by default
  • Single Page App

About Rendering Modes

Be aware of the last step where you should select Universal as rendering mode if you want to support server side rendering.

# 2. Does it work?

After scaffolding you should be able to run your application:

$ cd <project-name>
$ yarn run dev

By default the application runs on http://localhost:3000 (opens new window)

# 3. Provide configuration

Our CLI preconfigured some settings for you, but you can always reconfigure your module to your likings. All the configuration options can be found in the Configuration section.

{
  modules: [
    'nuxt-typo3', // register module
  ],
  typo3: {
    baseURL: 'https://yourwebsite.com', // provide the frontend domain
    api: {
      baseURL: 'https://api.yourwebsite.com' // provide the backend domain (API)
    },
    i18n: {
      locales: ['en', 'pl', 'de'],
      defaultLocale: 'en'
    }
  }
}

CORS

If you use various domains for your frontend and/or the API, please make sure that the API sends responses incorporating the Access-Control-Allow-Origin (opens new window) header. For your local development you can use proxy-module (opens new window)

# Now it's time for some customisations.

← 3. Customization →