typo3-headless / create-nuxt-typo3 Goto Github PK

View Code? Open in Web Editor NEW

12.0 5.0 2.0 2.41 MB

A npm package to kickstart new frontend PWA project based on nuxt-typo3

License: MIT License

JavaScript 69.07% Vue 30.17% Shell 0.60% SCSS 0.15%

create-nuxt-typo3's Introduction

Create TYPO3 Nuxt App

Create a Nuxt.js project in seconds

This is a fork of create-nuxt-app

Preview

Usage

Make sure you have npx installed (npx is shipped by default since npm 5.2.0)

npx create-nuxt-typo3 <my-project>

Or starting with npm v6.1 you can do:

npm init nuxt-typo3 <my-project>

Or with yarn:

yarn create nuxt-typo3 <my-project>

Features 🎉

Choose the package manager
- Yarn
- Npm
Choose programming language
- JavaScript
- TypeScript
Choose your favorite UI framework:
- None (feel free to add one later)
- Ant Design Vue
- Bootstrap
- Buefy
- Bulma
- Element
- Framevuerk
- iView
- Tachyons
- Tailwind CSS
- Vuetify
Choose between integrated server-side frameworks:
- None (Nuxt default server)
- Adonis
- Express
- Fastify
- Feathers
- Hapi
- Koa
- Micro
Choose the runtime for TypeScript (if you choose TypeScript)
- Default
- @nuxt/typescript-runtime
Choose Nuxt.js modules:
Choose linting tools:
Check the features needed for your project:
- PWA
- Linter / Formatter
- Prettier
- Axios
- Tachyons
Choose your favorite test framework:
- None
- Jest
- AVA
Choose rendering mode
- Universal (SSR)
- SPA

CLI Options

`--edge`

Alias: -e.

To install nuxt-edge instead of nuxt, add the command line option --edge:

npx create-nuxt-typo3 <my-project> --edge

npm init nuxt-typo3 <my-project> --edge

yarn create nuxt-typo3 <my-project> --edge

`--info`

Alias: -i. Print out debugging information relating to the local environment and exit.

`--help`

Alias: -h. Show the help information and exit, include: usage, command and all cli options.

`--verbose`

Show debug logs

`--version`

Alias: -v. Show version number and exit.

Credits

egoist
clarko
All our contributors (list).

create-nuxt-typo3's People

Contributors

Stargazers

Watchers

Forkers

somebdyelse typoniels

create-nuxt-typo3's Issues

This dependency was not found error on `yarn dev`

With the fresh installation of the vue project, getting this error "This dependency was not found" on yarn dev. Here is environment information

Environment:

TYPO3 version: 12.4
Node version: 18.20.4
NPM version: 10.7.0

nuxt.config.js


export default {
  components: true,
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#ff8700' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/macopedia/nuxt-typo3-theme
    'nuxt-typo3-tailwind',
    // Doc: https://github.com/TYPO3-Initiatives/nuxt-typo3
    'nuxt-typo3',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/pwa',
  ],
  /*
  ** TYPO3 module configuration
  ** https://github.com/TYPO3-Initiatives/nuxt-typo3
  */
  typo3: {
    baseURL: process.env.NUXT_HOST,
    forms: true,
    api: {
      baseURL: 'http://api.pwa-demo.site/'
    },
  },
  typo3tailwind: {
    layouts: false
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

package.json

{
  "name": "shop",
  "version": "1.0.0",
  "description": "shop for TYPO3",
  "author": "John Deo",
  "private": true,
  "scripts": {
    "dev": " nuxt",
    "build": "nuxt build",
    "start": " nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.0.0",
    "@nuxtjs/pwa": "^3.0.0-0",
    "nuxt-typo3": "latest",
    "nuxt-typo3-tailwind": "https://github.com/macopedia/nuxt-typo3-tailwind.git"
  },
  "devDependencies": {},
  "resolutions": {
    "@nuxt/kit": "3.0.0-rc.13"
  }
}

when run yarn dev its lead to error.

TypeError after fresh installation

I get the TypeError Cannot read property 'url' of undefined after a fresh installation with the following choices made during the create process:

npm
javascript
modules: nuxt-typo3, axios, pwa, dotenv
universal (ssr) rendering mode

Tested with node version 14.5.0 and 8.9.0.

Linting errors in newly created nuxt-typo3 app

=== Running task: Exec command 'cd front && npm init nuxt-typo3 --answers "$(< ./recommended.json)"' in container/service 'web', output below 

create-nuxt-typo3 v0.2.0
✨  Generating TYPO3 PWA based on Nuxt.js project in .
yarn run v1.22.5
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix

/var/www/html/front/components/Logo.vue
  3:12  error  clear  vue/comment-directive

/var/www/html/front/layouts/default.vue
  34:12  error  clear  vue/comment-directive

✖ 2 problems (2 errors, 0 warnings)

nuxt/eslint-plugin-nuxt#121 seems to refer to similar errors. Updating the packages seems to fix the error for me.

PR: #10

computed properties wont get filled at app-start

With slower API server connections, the App fatals with errors inside the layouts/defaults.vue component.
Objects like "state.typo3.initial.navigtation[0] are not filled and there is no check to prevent errors on it.
Proposing following changes:

\<template\> \<div v-if="navMain !== null" class="wrapper"\> ... \<div v-if="breadcrumbs !== null" class="border-b mb-20px"\> ... computed: { ...mapState({ navMain: state => state.typo3.initial.navigation ? state.typo3.initial.navigation[0] : null, // get first instance from root tree, breadcrumbs: (state) => state.typo3.page.page ? state.typo3.page.page.breadcrumbs : null, // get breadcrumbs for current page

This secures, that if the without the axios-GET-Request being fired or resolved when component is rendered, the corresponding template parts are not rendered.

typo3-headless / create-nuxt-typo3 Goto Github PK

create-nuxt-typo3's Introduction

Create TYPO3 Nuxt App

Usage

Features 🎉

CLI Options

--edge

--info

--help

--verbose

--version