Nuxt starter for CodeSandBox

Overview

codesandbox-nuxt

Nuxt starter for CodeSandBox (used for https://template.nuxtjs.org)

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate

For detailed explanation on how things work, checkout Nuxt.js docs.

For ESLint config

https://typescript.nuxtjs.org/guide/lint/

https://www.npmjs.com/package/eslint-plugin-prettier

https://eslint.vuejs.org/rules/

{
  # ...
  "plugins": [
    "eslint-plugin-prettier",
    "prettier"
  ],
  "extends": [
    # 1st set
    "eslint:recommended",
    "@nuxtjs/eslint-config-typescript",
    "plugin:vue/recommended",
    "plugin:prettier/recommended"

    # or 2nd set
    "plugin:vue/recommended",
    "eslint:recommended",
    "prettier/vue",
    "plugin:prettier/recommended"
  ],
  "rules": {}
}
{
  "root": true,
  "parserOptions": {
    "parser": "@babel/eslint-parser",
    "requireConfigFile": false,
    "sourceType": "module",
    "tsconfigRootDir": "./",
    "project": {
      "extends": "./tsconfig.json",
      "include": ["src/**/*.{js, ts, vue}"]
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "amd": true,
    "es6": true
  },
  "extends": [
    "@nuxtjs/eslint-config-typescript",
    "prettier",
    "plugin:prettier/recommended"
  ],
  "plugins": [],
  "rules": {}
}
{
  "root": true,
  "parserOptions": {
    "requireConfigFile": false,
    "sourceType": "module",
    "tsconfigRootDir": "./",
    "project": {
      "extends": "./tsconfig.json",
      "include": ["src/**/*.{js, ts, vue}"]
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "amd": true,
    "es6": true
  },
  "extends": [
    "@nuxtjs/eslint-config-typescript",
    "eslint:recommended",
    "plugin:vue/strongly-recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "tsconfigRootDir": ".",
    "requireConfigFile": false,
    "sourceType": "module",
    "project": {
      "extends": "./tsconfig.json"
    },
    "extraFileExtensions": [".vue"],
    "allowImportExportEverywhere": true
  },
  "env": {
    "browser": true,
    "node": true,
    "amd": true,
    "es6": true
  },
  "plugins": ["@typescript-eslint", "vue", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "@nuxtjs/eslint-config-typescript", // will enable this parser: @typescript-eslint/parser
    "plugin:vue/recommended", //https://eslint.vuejs.org/user-guide/#usage -- not supporting @Decorators
    "plugin:prettier/recommended",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": ["error"]
  }
}
{
  "name": "vue-nuxt-typescript-decorators",
  "version": "1.0.0",
  "description": "vue/nuxt + typescript + decorators",
  "author": "Nuxt.js Team",
  "private": true,
  "scripts": {
    "dev": "MINIMAL=1 nuxt-ts",
    "build": "nuxt-ts build",
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
    "lint-fix": "eslint --fix --ext .ts,.js,.vue --ignore-path .gitignore .",
    "lint-soft-fix": "eslint --fix-dry-run --ext .ts,.js,.vue --ignore-path .gitignore .",
    "start": "nuxt-start",
    "generate": "nuxt-ts generate",
    "post-update": "yarn upgrade --latest"
  },
  "eslintConfig": ".eslintrc",
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/eslint-parser": "^7.14.3",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-decorators": "^7.14.2",
    "@nuxt/babel-preset-app": "2.15.6",
    "@nuxt/types": "^2.15.0",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxt/typescript-runtime": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "3.0.2",
    "@nuxtjs/tailwindcss": "^3.4.0",
    "@typescript-eslint/eslint-plugin": "4.24.0",
    "@typescript-eslint/parser": "4.24.0",
    "autoprefixer": "^9.0.0",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.9.0",
    "nuxt": "^2.15.0",
    "nuxt-mq": "^2.0.2",
    "nuxt-property-decorator": "^2.9.1",
    "nuxt-start": "^2.15.6",
    "postcss": "^7.0.35",
    "prettier": "^2.3.0",
    "vue-class-component": "^7.2.0",
    "vue-property-decorator": "^9.1.0"
  },
  "devDependencies": {},
  "keywords": [
    "vue",
    "nuxt",
    "typescript"
  ]
}
// .babelrc
{
  "presets": [],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}
You might also like...
Frisque-nuxt-storyblok - A basic framework for integrating StoryBlok with Nuxt

🌺 Frisque StoryBlok Welcome to the Frisque StoryBlok starter kit! This is curre

Netlify ❤️ Nuxt.js: a simple template to give you the code you need to use Netlify features with Nuxt.
Netlify ❤️ Nuxt.js: a simple template to give you the code you need to use Netlify features with Nuxt.

Nuxt Toolbox Template This is a NuxtJS v2 project. It is a reference on how to integrate commonly used features within Netlify for Nuxt.js. Build Setu

A lightweight Nuxt template to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.
A lightweight Nuxt template to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.

A lightweight Nuxt template to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.

WordPress module for Nuxt.js with full support for SSR and Nuxt.js PWA module.

WordPress module for Nuxt.js with full support for SSR and Nuxt.js PWA module.

🖼Portfolio built with Nuxt and Nuxt Content

🖼Portfolio built with Nuxt and Nuxt Content

🌰 WIP! A starter example for element-plus with nuxt3.

Element Plus with Nuxt 3 Minimal Starter 🏗 WIP (Work in Progress) Nuxt3 is still beta, we may need to keep updating to adapt it. Preview: https://nux

Starter template for parallax effects & smooth scrolling experience
Starter template for parallax effects & smooth scrolling experience

Nuxt + Locomotive Scroll Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time. See it in action →

Nuxt3 starter with tailwindcss, prisma, vueuse, formkit, iconify

Nuxt3 starter with tailwindcss, prisma, vueuse, formkit, iconify

An application / authentication starter kit frontend in Nuxt3 for Laravel Breeze.

Laravel Breeze - Nuxt3 Edition 🏝️ Introduction Based on the work made at breeze-next This repository is an implementation of the Laravel Breeze appli

Owner
Daniel Gilbert
Senior Blockchain & Full-Stack Developer
Daniel Gilbert
Starter Template for Nuxt.js with Tailwind CSS and Axios.

Starter Template for Nuxt.js with Tailwind CSS and GraphQL Build Setup # install dependencies

Michael Owuor 1 May 12, 2022
An application / authentication starter kit frontend in Nuxt.js for Laravel Breeze.

Laravel Breeze - Nuxt.js Edition Inspiration This project was heavily inspired by the Breeze Next.js project. Have fun! Introduction This repository i

Filip 61 Jan 3, 2023
A starter example for tdesign-vue-next with Nuxt 3.

A starter example for tdesign-vue-next with Nuxt 3.

一夏 11 Dec 10, 2022
A convenient replacement for component when using nuxt-i18n

nuxt-i18n-link A convenient replacement for <nuxt-link> component when using nuxt-i18n. It is simply a replacement for this exact code: <nuxt-link :to

iBlueDust 1 May 25, 2021
A webpack loader i18n solution for Vue (Nuxt) with auto generated keysA webpack loader i18n solution for Vue (Nuxt) with auto generated keys

vue-i18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys. Currently under development, pull requests and suggest

BitApp 0 Feb 7, 2022
This is nuxt invoice app using nuxt.js and firebase

Nuxt Invoice App Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and

Moein Salari 8 Dec 20, 2022
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Open Source Afghanistan 16 Dec 30, 2022
A simple nuxt renderless component wrapper around nuxt fetch capabilities

Nuxt Fetch Component A simple nuxt renderless component wrapper around nuxt fetc

Mathieu Marteau 6 Apr 12, 2022
Nuxt basic - Simple Nuxt.js project

nuxt_basic Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launc

null 2 Oct 20, 2022
English-quiz-nuxt - An english quiz using nuxt

english-quiz-nuxt Live demo here Build Setup # install dependencies $ yarn insta

Leonid Gainar 2 Feb 17, 2022