Code Monkey home page Code Monkey logo

nuxt3-practice's Introduction

Nuxt3 Practice

Nuxt3 の開発勉強用リポジトリです。

  • node v20.6.1を使用しています。

Getting Started

  1. yarn install

  2. yarn dev

Preparation commands

  1. npx nuxi init appName

  2. yarn add -D vuetify vite-plugin-vuetify sass @mdi/font

  3. yarn add -D typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript @types/node

  4. yarn add -D eslint eslint-config-prettier eslint-plugin-nuxt prettier

  5. yarn add -D stylelint stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard-scss postcss-html

  6. yarn add -D @nuxtjs/critters gsap nodemailer vue3-google-map

  7. yarn add -D @tiptap/core @tiptap/extension-color @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-link @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-typography @tiptap/extension-underline @tiptap/pm @tiptap/starter-kit @tiptap/vue-3

  8. npx nuxi@latest devtools enable

Upgrade commands

yarn upgrade nuxt vuetify vite-plugin-vuetify sass @mdi/font typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript @types/node eslint eslint-config-prettier eslint-plugin-nuxt prettier stylelint stylelint-config-recess-order stylelint-config-standard-scss postcss-html vue3-google-map gsap nodemailer @tiptap/core @tiptap/extension-color @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-link @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-typography @tiptap/extension-underline @tiptap/extension-youtube @tiptap/pm @tiptap/starter-kit @tiptap/vue-3 --latest

改善余地(皆さんやってみてください)

  • GoogleMap のカスタムコントロールボタンを押したら位置情報を取得してマップをその座標に合わせる
  • Form の送信ボタンを押した時にバリデーションチェックをしてダメなら送信しないでバリデーションに引っかかったことを何かしらの形で表示する(単純に alert でも可)
  • Todo に status 項目(実行前、実行中、完了など線引きは自由に)を追加し、表示も status 毎に並ぶ形にする
  • Todo を並び替え可能にする

nuxt3-practice's People

Contributors

gityosan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.