knowledge

  1. Experience on pit
  2. Install the @pinia/nuxt plug-in and run it

Experience on pit

Yesterday I ran a demo of Nuxt3 on Stackblitz.com and experienced a route jump. I was surprised to see how fast Stackblitz can run. Last night I installed @Pinia/Nuxt online and it didn’t work either. When I woke up this morning, I installed it locally. The reason is that my Node is 16.13.0 and Stackblitz is 14.16.0

measures

  1. I did a bunch of Internet searches for StackBlitz to switch between Node versions and couldn’t find anything,
  2. Upgrade the Node online.npm install -g n, indicating that there is no -g operation
  3. Upgrade NPM?npm-windows-upgradeAn error,

So far, due to time constraints, I stopped trying. I had to give up Stackblitz and switch to local development. If you find a solution, please keep me posted, thanks!

Install @ pinia/nuxt

  1. Install dependencies in packge.json, where esLint is installed, and then configure esLint to do the code specification
 "dependencies": {
    "pinia": "^ 2.0.4"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^ 0.11.1"."@pinia/nuxt": "^ 0.1.5"."@vueuse/core": "^ 7.1.2." "."eslint": "^ 8.3.0"."nuxt3": "latest"."typescript": "^ 4.5.2." "
  }
Copy the code
  1. Nuxt.config. ts
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  meta: {
    title: 'Nuxt 3',},buildModules: [
    '@vueuse/core/nuxt'.'@pinia/nuxt',].vite: {
    logLevel: 'info',}})Copy the code
  1. According to the online case, an InputEntry and stores is matched

InputEntry.vue

<script setup lang="ts">
const name = ref(' ')

const router = useRouter()
const go = () = > {
  if (name.value)
    router.push(`/hi/The ${encodeURIComponent(name.value)}`)
}
</script>

<template>
  <div>
    <input
      id="input"
      v-model="name"
      placeholder="What's your name?"
      type="text"
      autocomplete="false"
      p="x-4 y-2"
      m="t-5"
      w="250px"
      text="center"
      bg="transparent"
      border="~ rounded gray-200 dark:gray-700"
      outline="none active:none"
      @keydown.enter="go"
    >
    <div>
      <button
        class="m-3 text-sm btn"
        :disabled=! "" name"
        @click="go"
      >
        GO
      </button>
    </div>
  </div>
</template>

Copy the code
  1. Effect of screenshots

So far the plug-in is a success, you can try more tricks

The last

After these two days of introduction, we can help Village chief Yang translate Nuxt3 together. Here is a small advertisement. Those who are interested in translating and learning Nuxt3 together with Village Chief Yang can participate in the Nuxt3 document of this project

This time, my detailed code is put in my Git repository and will be updated continuously. Click the link to see Nuxt3demo

If the article is helpful to you, please also like, support!