Corey Brooks

Corey Brooks

1666324388

Create a Static Website with Nuxt JS

Learn how to create a static website with NuxtJS. Build highly amazing Vue JS apps with Nuxt.js. Using Nuxt JS to create static generated websites that are amazing for SEO ranking and loading speed! Nuxt uses server-side-rendering and a folder-based configuration.

In this class we will be using Nuxt JS to create static generated websites that are amazing for SEO ranking and loading speed! Regular websites don't allow search crawlers to see the content of your page, therefore you never rank. Nuxt JS uses Vue JS, so if you are familiar with Vue JS, you will be set for this course. With Nuxt js, the site is generated into plain HTML so that the search crawlers can actually read it!

What you’ll learn:

  •        Creating Pages
  •        Using Components (for Header)
  •        Using Layouts
  •        Using Sass & Global CSS Files
  •        Page Transitions (Animations)
  •        Page Loading Bar Animation
  •        Building the Project

Are there any course requirements or prerequisites?

  •        Code Editor/IDE

Who this course is for:

  •        Beginner Programmers
  •        Web Developers

#nuxtjs #vue #vuejs #webdev 

Create a Static Website with Nuxt JS

How to use Nuxt.js and Chrome

In this tutorial, you'll learn how to use Nuxt.js and Chrome

Today I’m here to talk about the collaboration between the Chrome team and the Nuxt framework

0:00 Introduction
0:52 What is Chrome Aurora?
4:00 Performance focus areas
5:46 Performance focus area: Images
23:15 Performance focus area: Web fonts
29:38 Nuxt performance roadmap link info

#nuxtjs #chrome #vue 

How to use Nuxt.js and Chrome

Learn Nuxt 3 - The Hybrid Vue Framework

Learn Nuxt 3, the hybrid Vue framework in this course for beginners. Learn Nuxtjs with all its new features in the Nuxt3 application.

Build your next application with Vue 3 and experience hybrid rendering, powerful data fetching and new features. Nuxt 3 is an open source framework making web development simple and powerful.

🌟 Course Contents 🌟
⏳ (00:00:00) Intro to course
⏳ (00:06:58) What is Nuxt3
⏳ (00:11:20) Installation
⏳ (00:16:16) Explore Project 
⏳ (00:22:28) Auto Import
⏳ (00:28:14) Components Directory
⏳ (00:36:03) Dynamic components & import
⏳ (00:48:02) Routing
⏳ (00:55:00) Page Navigation
⏳ (00:59:59) Layouts
⏳ (01:11:46) Dynamic Routes
⏳ (01:18:12) Tailwindcss Assets
⏳ (01:26:18) Public Directory
⏳ (01:36:57) Head Management
⏳ (01:48:42) Composables
⏳ (02:03:20) Fetch Data
⏳ (02:13:58) Auth State
⏳ (02:23:20) 3 Kinds of Middleware
⏳ (02:35:13) Server Routes
⏳ (02:43:32) Deploy to Netlify

Source Code: https://github.com/bitfumes/nuxt3-course-2022

#nuxt #nuxtjs #vue #vuejs 

Learn Nuxt 3 - The Hybrid Vue Framework
Audra  Haag

Audra Haag

1662478680

Install & Setup Laravel 9 Sanctum Authentication With NuxtJS

In this section we will install & setup Laravel 9 sanctum authentication with Nuxt JS. Nuxt JS provides automatic performance optimization, routing, component imports, and options for server-side rendering (SSR) or static site generation (SSG). If you’ve ever used Gatsby for React, modules are similar to plugins.

Source: https://larainfo.com

#laravel #nuxtjs 

Install & Setup Laravel 9 Sanctum Authentication With NuxtJS
Hoang Tran

Hoang Tran

1662471420

Cài Đặt & Thiết Lập Xác Thực Sanctum Laravel 9 Với NuxtJS

Trong phần này, chúng tôi sẽ cài đặt và thiết lập xác thực sanctum Laravel 9 với Nuxt JS. Nuxt JS cung cấp tối ưu hóa hiệu suất tự động, định tuyến, nhập thành phần và các tùy chọn để hiển thị phía máy chủ (SSR) hoặc tạo trang web tĩnh (SSG). Nếu bạn đã từng sử dụng Gatsby cho React, các mô-đun tương tự như các plugin.

Thiết lập Xác thực Sanctum Laravel 9

Tạo dự án laravel

composer create-project Laravel/laravel laravel-backend  

Thiết lập tệp .env của bạn

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

Cài đặt Laravel Breeze

composer require laravel/breeze --dev

Cài đặt lệnh laravel khoe api để tạo auth Sanctum.

php artisan breeze:install api

Sau khi cài đặt ứng dụng khoe khoang, bạn có thể thấy tệp .env có hai url dành cho phụ trợ và giao diện người dùng. Bạn có thể thay đổi url trong sản xuất, đối với địa phương để lại nó.

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

chạy dự án và rời khỏi nó.

php artisan serve  

Lưu ý: Mở hai terminal một để chạy ứng dụng laravel & thứ hai để tạo dự án nuxtjs và chạy.

Thiết lập Xác thực Nuxt js Sanctum

Tạo ứng dụng js nuxt

Sử dụng NPM:

npm init nuxt-app frontend

Sử dụng sợi:

yarn create nuxt-app frontend

Sau đó chọn yêu cầu dự án của bạn.

Cài đặt Nuxtjs Auth

sử dụng sợi:

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

sử dụng npm:

npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/axios

Nhập Nuxt JS laravel Sanctum trong nuxt.config.js

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: '/login'
          }
        }
      },
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://localhost:8000',
    credentials: true
  },

  router: {
    middleware: ['auth']
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

Tiếp theo, bạn cần tạo thư mục login.vue , register.vue và layouts thêm tệp default.vue .thư mục laravel 9 sanctum nuxt js auth

Tạo default.vue và navbar với liên kết nuxt js như đăng nhập, đăng ký và đăng xuất.

default.view

<template>
  <div>
    <nav class="container flex justify-around py-8 mx-auto bg-white">
      <div>
        <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
      </div>
      <div class="flex space-x-8">
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/login" v-if="!$auth.loggedIn">Login</NuxtLink>
        <NuxtLink to="/register" v-if="!$auth.loggedIn">Register</NuxtLink>
        <div v-if="$auth.loggedIn">
          <button
            type="button"
            @click="logout"
          >
            Logout
          </button>
        </div>
      </div>
    </nav>
    <Nuxt />
  </div>
</template>
<script>
export default {
  middleware: "auth",
  methods: {
    async logout() {
      this.$nuxt.$loading.start();
      this.$auth.logout();
      this.$nuxt.$loading.finish();
      this.$router.push("/login");
    },
  },
};
</script>

trang / register.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign Up
      </h1>

      <form class="mt-6" ref="registerform" @submit.prevent="register">
        <div>
          <label for="name" class="block text-sm text-gray-800">name</label>
          <input
            v-model="form.name"
            name="name"
            type="text"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password Confirmation</label
            >
            <input
              v-model="form.password_confirmation"
              name="password_confirmation"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  auth: "guest",
    data() {
    return {
      form: {
        name: null,
        email: null,
        password: null,
        password_confirmation: null
      },
      errors: []
    }
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    register() {
      try {
        this.$axios.post("/register", this.form).then((res) => {
          this.$auth.loginWith("laravelSanctum", { data: this.form });
          this.$router.push({
            path: "/",
          });
        });
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

trang / login.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign In
      </h1>
      <form class="mt-6" @submit.prevent="login">
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Login
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  auth: "guest",
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
    };
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    async login() {
      this.$nuxt.$loading.start();
      try {
        await this.$auth.loginWith("laravelSanctum", { data: this.form });
        this.$router.push({
          path: "/",
        });
      } catch (err) {
        console.log(err);
      }
      this.$nuxt.$loading.finish();
    },
  },
};
</script>

đăng nhập laravel 9 sanctum nuxt js

trang / index.vue

<template>
  <div>
    <div class="flex items-center justify-center h-screen">
      <div class="max-w-xl p-5 shadow">
        <div v-if="!$auth.loggedIn">
          <h3>Home</h3>
        </div>
        <div v-if="$auth.loggedIn">
          <div>Name:{{ $auth.user.name }}</div>
          <div>Name:{{ $auth.user.email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
};
</script>

laravel 9 sanctum nuxt js auth

Chạy máy chủ

npm run dev

Nguồn:  https://larainfo.com

#laravel #nuxtjs 

Cài Đặt & Thiết Lập Xác Thực Sanctum Laravel 9 Với NuxtJS

Установка, настройка аутентификации Laravel 9 Sanctum с помощью NuxtJS

В этом разделе мы установим и настроим аутентификацию Laravel 9 в святилище с помощью Nuxt JS. Nuxt JS обеспечивает автоматическую оптимизацию производительности, маршрутизацию, импорт компонентов и параметры для рендеринга на стороне сервера (SSR) или создания статического сайта (SSG). Если вы когда-либо использовали Gatsby для React, модули похожи на плагины.

Настройка аутентификации Laravel 9 Sanctum

Создать ларавельный проект

composer create-project Laravel/laravel laravel-backend  

Настройте файл .env

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

Установите Laravel Breeze

composer require laravel/breeze --dev

Установите команду laravel breeze api, чтобы создать аутентификацию Sanctum.

php artisan breeze:install api

После установки breeze api вы можете увидеть два URL-адреса файла .env для бэкэнда и внешнего интерфейса. Вы можете изменить URL-адрес в производстве, для локального оставьте его.

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

запустить проект и выйти из него.

php artisan serve  

Примечание. Откройте два терминала: один для запуска приложения laravel, а второй — для создания проекта nuxtjs и запуска.

Настройка аутентификации Nuxt js Sanctum

Создать приложение nuxt js

Использование НПМ:

npm init nuxt-app frontend

Использование пряжи:

yarn create nuxt-app frontend

Затем выберите требования к проекту.

Установите аутентификацию Nuxtjs

с использованием пряжи:

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

используя нпм:

npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/axios

Импортировать Laravel Sanctum Nuxt JS в nuxt.config.js

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: '/login'
          }
        }
      },
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://localhost:8000',
    credentials: true
  },

  router: {
    middleware: ['auth']
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

Затем вам нужно создать папку login.vue , register.vue и layouts, добавить файл default.vue .Папка авторизации laravel 9 святилища nuxt js

Создайте default.vue и панель навигации со ссылкой nuxt js, такой как вход, регистрация и выход.

вид по умолчанию

<template>
  <div>
    <nav class="container flex justify-around py-8 mx-auto bg-white">
      <div>
        <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
      </div>
      <div class="flex space-x-8">
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/login" v-if="!$auth.loggedIn">Login</NuxtLink>
        <NuxtLink to="/register" v-if="!$auth.loggedIn">Register</NuxtLink>
        <div v-if="$auth.loggedIn">
          <button
            type="button"
            @click="logout"
          >
            Logout
          </button>
        </div>
      </div>
    </nav>
    <Nuxt />
  </div>
</template>
<script>
export default {
  middleware: "auth",
  methods: {
    async logout() {
      this.$nuxt.$loading.start();
      this.$auth.logout();
      this.$nuxt.$loading.finish();
      this.$router.push("/login");
    },
  },
};
</script>

страницы /register.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign Up
      </h1>

      <form class="mt-6" ref="registerform" @submit.prevent="register">
        <div>
          <label for="name" class="block text-sm text-gray-800">name</label>
          <input
            v-model="form.name"
            name="name"
            type="text"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password Confirmation</label
            >
            <input
              v-model="form.password_confirmation"
              name="password_confirmation"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  auth: "guest",
    data() {
    return {
      form: {
        name: null,
        email: null,
        password: null,
        password_confirmation: null
      },
      errors: []
    }
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    register() {
      try {
        this.$axios.post("/register", this.form).then((res) => {
          this.$auth.loginWith("laravelSanctum", { data: this.form });
          this.$router.push({
            path: "/",
          });
        });
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

страницы /login.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign In
      </h1>
      <form class="mt-6" @submit.prevent="login">
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Login
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  auth: "guest",
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
    };
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    async login() {
      this.$nuxt.$loading.start();
      try {
        await this.$auth.loginWith("laravelSanctum", { data: this.form });
        this.$router.push({
          path: "/",
        });
      } catch (err) {
        console.log(err);
      }
      this.$nuxt.$loading.finish();
    },
  },
};
</script>

Вход в систему Laravel 9 Santum Nuxt JS

страницы /index.vue

<template>
  <div>
    <div class="flex items-center justify-center h-screen">
      <div class="max-w-xl p-5 shadow">
        <div v-if="!$auth.loggedIn">
          <h3>Home</h3>
        </div>
        <div v-if="$auth.loggedIn">
          <div>Name:{{ $auth.user.name }}</div>
          <div>Name:{{ $auth.user.email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
};
</script>

laravel 9 святилище nuxt js аутентификация

Запустить сервер

npm run dev

Источник:  https://larainfo.com

#laravel #nuxtjs 

Установка, настройка аутентификации Laravel 9 Sanctum с помощью NuxtJS
工藤  晃

工藤 晃

1662456900

使用 NuxtJS 安裝和設置 Laravel 9 Sanctum 身份驗證

在本節中,我們將使用 Nuxt JS 安裝和設置 Laravel 9 sanctum 身份驗證。Nuxt JS 為服務器端渲染 (SSR) 或靜態站點生成 (SSG) 提供自動性能優化、路由、組件導入和選項。如果你曾經在 React 中使用過 Gatsby,那麼模塊類似於插件。

設置 Laravel 9 Sanctum 身份驗證

創建 laravel 項目

composer create-project Laravel/laravel laravel-backend  

設置你的 .env 文件

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

安裝 Laravel 微風

composer require laravel/breeze --dev

安裝 laravel 微風 api 命令來創建 Sanctum 身份驗證。

php artisan breeze:install api

安裝breeze api 後,你可以看到.env 文件有後端和前端的兩個url。您可以在生產中更改 url,本地保留它。

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

運行項目並離開它。

php artisan serve  

注意:打開兩個終端,一是運行 laravel 應用程序,二是創建 nuxtjs 項目並運行。

設置 Nuxt js Sanctum 身份驗證

創建 nuxt js 應用

使用 NPM:

npm init nuxt-app frontend

使用紗線:

yarn create nuxt-app frontend

然後選擇您的項目要求。

安裝 Nuxtjs 身份驗證

使用紗線:

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

使用 npm:

npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/axios

在nuxt.config.js中導入 Nuxt JS laravel Sanctum

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: '/login'
          }
        }
      },
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://localhost:8000',
    credentials: true
  },

  router: {
    middleware: ['auth']
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

接下來,您需要創建login.vueregister.vue和 layouts 文件夾添加default.vue文件。laravel 9 sanctum nuxt js auth 文件夾

使用 nuxt js 鏈接創建default.vue和 navbar,例如登錄、註冊和註銷。

默認視圖

<template>
  <div>
    <nav class="container flex justify-around py-8 mx-auto bg-white">
      <div>
        <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
      </div>
      <div class="flex space-x-8">
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/login" v-if="!$auth.loggedIn">Login</NuxtLink>
        <NuxtLink to="/register" v-if="!$auth.loggedIn">Register</NuxtLink>
        <div v-if="$auth.loggedIn">
          <button
            type="button"
            @click="logout"
          >
            Logout
          </button>
        </div>
      </div>
    </nav>
    <Nuxt />
  </div>
</template>
<script>
export default {
  middleware: "auth",
  methods: {
    async logout() {
      this.$nuxt.$loading.start();
      this.$auth.logout();
      this.$nuxt.$loading.finish();
      this.$router.push("/login");
    },
  },
};
</script>

頁面/register.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign Up
      </h1>

      <form class="mt-6" ref="registerform" @submit.prevent="register">
        <div>
          <label for="name" class="block text-sm text-gray-800">name</label>
          <input
            v-model="form.name"
            name="name"
            type="text"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password Confirmation</label
            >
            <input
              v-model="form.password_confirmation"
              name="password_confirmation"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  auth: "guest",
    data() {
    return {
      form: {
        name: null,
        email: null,
        password: null,
        password_confirmation: null
      },
      errors: []
    }
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    register() {
      try {
        this.$axios.post("/register", this.form).then((res) => {
          this.$auth.loginWith("laravelSanctum", { data: this.form });
          this.$router.push({
            path: "/",
          });
        });
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

頁面/login.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign In
      </h1>
      <form class="mt-6" @submit.prevent="login">
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Login
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  auth: "guest",
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
    };
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    async login() {
      this.$nuxt.$loading.start();
      try {
        await this.$auth.loginWith("laravelSanctum", { data: this.form });
        this.$router.push({
          path: "/",
        });
      } catch (err) {
        console.log(err);
      }
      this.$nuxt.$loading.finish();
    },
  },
};
</script>

laravel 9 sanctum nuxt js 登錄

頁面/index.vue

<template>
  <div>
    <div class="flex items-center justify-center h-screen">
      <div class="max-w-xl p-5 shadow">
        <div v-if="!$auth.loggedIn">
          <h3>Home</h3>
        </div>
        <div v-if="$auth.loggedIn">
          <div>Name:{{ $auth.user.name }}</div>
          <div>Name:{{ $auth.user.email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
};
</script>

laravel 9 sanctum nuxt js 身份驗證

運行服務器

npm run dev

來源:  https ://larainfo.com

#laravel #nuxtjs 

使用 NuxtJS 安裝和設置 Laravel 9 Sanctum 身份驗證
Shayna  Lowe

Shayna Lowe

1662447960

Installer, Configurer L'authentification Laravel 9 Sanctum Avec NuxtJS

Dans cette section, nous allons installer et configurer l'authentification Laravel 9 sanctum avec Nuxt JS. Nuxt JS fournit une optimisation automatique des performances, un routage, des importations de composants et des options de rendu côté serveur (SSR) ou de génération de site statique (SSG). Si vous avez déjà utilisé Gatsby pour React, les modules sont similaires aux plugins.

Configurer l'authentification Laravel 9 Sanctum

Créer un projet laravel

composer create-project Laravel/laravel laravel-backend  

Configurez votre fichier .env

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

Installer Laravel Breeze

composer require laravel/breeze --dev

Installez la commande api laravel Breeze pour créer l'authentification Sanctum.

php artisan breeze:install api

Après avoir installé l'api Breeze, vous pouvez voir le fichier .env deux URL pour le backend et le frontend. Vous pouvez changer l'URL en production, pour les locaux, laissez-la.

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

exécuter le projet et le quitter.

php artisan serve  

Remarque : ouvrez deux terminaux, l'un pour exécuter l'application laravel et l'autre pour créer le projet nuxtjs et l'exécuter.

Configurer l'authentification Nuxt js Sanctum

Créer une application nuxt js

Utilisation de NPM :

npm init nuxt-app frontend

Utilisation de fil :

yarn create nuxt-app frontend

Ensuite, choisissez les exigences de votre projet.

Installer Nuxtjs Auth

en utilisant du fil :

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

en utilisant npm :

npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/axios

Importer Nuxt JS laravel Sanctum dans nuxt.config.js

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: '/login'
          }
        }
      },
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://localhost:8000',
    credentials: true
  },

  router: {
    middleware: ['auth']
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

Ensuite, vous devez créer login.vue , register.vue et le dossier layouts ajouter le fichier default.vue .dossier d'authentification laravel 9 sanctum nuxt js

Créez default.vue et navbar avec le lien nuxt js comme la connexion, l'enregistrement et la déconnexion.

vue par défaut

<template>
  <div>
    <nav class="container flex justify-around py-8 mx-auto bg-white">
      <div>
        <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
      </div>
      <div class="flex space-x-8">
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/login" v-if="!$auth.loggedIn">Login</NuxtLink>
        <NuxtLink to="/register" v-if="!$auth.loggedIn">Register</NuxtLink>
        <div v-if="$auth.loggedIn">
          <button
            type="button"
            @click="logout"
          >
            Logout
          </button>
        </div>
      </div>
    </nav>
    <Nuxt />
  </div>
</template>
<script>
export default {
  middleware: "auth",
  methods: {
    async logout() {
      this.$nuxt.$loading.start();
      this.$auth.logout();
      this.$nuxt.$loading.finish();
      this.$router.push("/login");
    },
  },
};
</script>

pages/register.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign Up
      </h1>

      <form class="mt-6" ref="registerform" @submit.prevent="register">
        <div>
          <label for="name" class="block text-sm text-gray-800">name</label>
          <input
            v-model="form.name"
            name="name"
            type="text"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password Confirmation</label
            >
            <input
              v-model="form.password_confirmation"
              name="password_confirmation"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  auth: "guest",
    data() {
    return {
      form: {
        name: null,
        email: null,
        password: null,
        password_confirmation: null
      },
      errors: []
    }
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    register() {
      try {
        this.$axios.post("/register", this.form).then((res) => {
          this.$auth.loginWith("laravelSanctum", { data: this.form });
          this.$router.push({
            path: "/",
          });
        });
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

pages/login.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign In
      </h1>
      <form class="mt-6" @submit.prevent="login">
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Login
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  auth: "guest",
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
    };
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    async login() {
      this.$nuxt.$loading.start();
      try {
        await this.$auth.loginWith("laravelSanctum", { data: this.form });
        this.$router.push({
          path: "/",
        });
      } catch (err) {
        console.log(err);
      }
      this.$nuxt.$loading.finish();
    },
  },
};
</script>

connexion laravel 9 sanctum nuxt js

pages/index.vue

<template>
  <div>
    <div class="flex items-center justify-center h-screen">
      <div class="max-w-xl p-5 shadow">
        <div v-if="!$auth.loggedIn">
          <h3>Home</h3>
        </div>
        <div v-if="$auth.loggedIn">
          <div>Name:{{ $auth.user.name }}</div>
          <div>Name:{{ $auth.user.email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
};
</script>

laravel 9 sanctum nuxt js auth

Exécutez le serveur

npm run dev

Source :  https://larainfo.com

#laravel #nuxtjs 

Installer, Configurer L'authentification Laravel 9 Sanctum Avec NuxtJS

Instalar Y Configurar Laravel 9 Sanctum Authentication Con NuxtJS

En esta sección, instalaremos y configuraremos la autenticación sanctum de Laravel 9 con Nuxt JS. Nuxt JS proporciona optimización automática del rendimiento, enrutamiento, importación de componentes y opciones para la representación del lado del servidor (SSR) o la generación de sitios estáticos (SSG). Si alguna vez ha usado Gatsby para React, los módulos son similares a los complementos.

Configurar la Autenticación de Laravel 9 Sanctum

Crear proyecto laravel

composer create-project Laravel/laravel laravel-backend  

Configura tu archivo .env

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

Instalar Laravel Breeze

composer require laravel/breeze --dev

Instale el comando api de laravel brisa para crear la autenticación de Sanctum.

php artisan breeze:install api

Después de instalar la API de Brisa, puede ver el archivo .env dos URL para backend y frontend. Puedes cambiar url en producción, para local déjalo.

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

ejecuta el proyecto y déjalo.

php artisan serve  

Nota: Abra dos terminales, uno para ejecutar la aplicación laravel y el segundo para crear el proyecto nuxtjs y ejecutarlo.

Configurar la autenticación Nuxt js Sanctum

Crear aplicación nuxt js

Usando NPM:

npm init nuxt-app frontend

Usando hilo:

yarn create nuxt-app frontend

A continuación, elija los requisitos de su proyecto.

Instalar Autenticación de Nuxtjs

usando hilo:

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

usando npm:

npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/axios

Importar Nuxt JS laravel Sanctum en nuxt.config.js

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: '/login'
          }
        }
      },
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://localhost:8000',
    credentials: true
  },

  router: {
    middleware: ['auth']
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

A continuación, debe crear login.vue , register.vue y la carpeta de diseños agregar el archivo default.vue .laravel 9 sanctum nuxt js carpeta de autenticación

Cree default.vue y navbar con el enlace nuxt js como iniciar sesión, registrarse y cerrar sesión.

vista predeterminada

<template>
  <div>
    <nav class="container flex justify-around py-8 mx-auto bg-white">
      <div>
        <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
      </div>
      <div class="flex space-x-8">
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/login" v-if="!$auth.loggedIn">Login</NuxtLink>
        <NuxtLink to="/register" v-if="!$auth.loggedIn">Register</NuxtLink>
        <div v-if="$auth.loggedIn">
          <button
            type="button"
            @click="logout"
          >
            Logout
          </button>
        </div>
      </div>
    </nav>
    <Nuxt />
  </div>
</template>
<script>
export default {
  middleware: "auth",
  methods: {
    async logout() {
      this.$nuxt.$loading.start();
      this.$auth.logout();
      this.$nuxt.$loading.finish();
      this.$router.push("/login");
    },
  },
};
</script>

páginas/registrar.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign Up
      </h1>

      <form class="mt-6" ref="registerform" @submit.prevent="register">
        <div>
          <label for="name" class="block text-sm text-gray-800">name</label>
          <input
            v-model="form.name"
            name="name"
            type="text"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password Confirmation</label
            >
            <input
              v-model="form.password_confirmation"
              name="password_confirmation"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  auth: "guest",
    data() {
    return {
      form: {
        name: null,
        email: null,
        password: null,
        password_confirmation: null
      },
      errors: []
    }
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    register() {
      try {
        this.$axios.post("/register", this.form).then((res) => {
          this.$auth.loginWith("laravelSanctum", { data: this.form });
          this.$router.push({
            path: "/",
          });
        });
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

páginas/login.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign In
      </h1>
      <form class="mt-6" @submit.prevent="login">
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Login
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  auth: "guest",
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
    };
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    async login() {
      this.$nuxt.$loading.start();
      try {
        await this.$auth.loginWith("laravelSanctum", { data: this.form });
        this.$router.push({
          path: "/",
        });
      } catch (err) {
        console.log(err);
      }
      this.$nuxt.$loading.finish();
    },
  },
};
</script>

laravel 9 santuario nuxt js inicio de sesión

páginas/index.vue

<template>
  <div>
    <div class="flex items-center justify-center h-screen">
      <div class="max-w-xl p-5 shadow">
        <div v-if="!$auth.loggedIn">
          <h3>Home</h3>
        </div>
        <div v-if="$auth.loggedIn">
          <div>Name:{{ $auth.user.name }}</div>
          <div>Name:{{ $auth.user.email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
};
</script>

laravel 9 sanctum nuxt js auth

Ejecutar el servidor

npm run dev

Fuente:  https://larainfo.com

#laravel #nuxtjs 

Instalar Y Configurar Laravel 9 Sanctum Authentication Con NuxtJS

Instalar E Configurar A Autenticação Laravel 9 Sanctum Com NuxtJS

Nesta seção, instalaremos e configuraremos a autenticação Laravel 9 sanctum com Nuxt JS. O Nuxt JS fornece otimização automática de desempenho, roteamento, importação de componentes e opções para renderização do lado do servidor (SSR) ou geração de site estático (SSG). Se você já usou o Gatsby for React, os módulos são semelhantes aos plugins.

Configurar autenticação Laravel 9 Sanctum

Criar projeto laravel

composer create-project Laravel/laravel laravel-backend  

Configure seu arquivo .env

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

Instale o Laravel Breeze

composer require laravel/breeze --dev

Instale o comando laravel brisa api para criar a autenticação do Sanctum.

php artisan breeze:install api

Depois de instalar a api brisa, você pode ver o arquivo .env dois url para back-end e front-end. Você pode alterar a url em produção, para local deixe-a.

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

execute o projeto e deixe-o.

php artisan serve  

Nota: Abra dois terminais um para executar o aplicativo laravel e o segundo para criar o projeto nuxtjs e executá-lo.

Configurar autenticação Nuxt js Sanctum

Criar aplicativo nuxt js

Usando NPM:

npm init nuxt-app frontend

Usando o fio:

yarn create nuxt-app frontend

Em seguida, escolha os requisitos do seu projeto.

Instale a autenticação Nuxtjs

usando fio:

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

usando npm:

npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/axios

Importar Nuxt JS laravel Sanctum em nuxt.config.js

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: '/login'
          }
        }
      },
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://localhost:8000',
    credentials: true
  },

  router: {
    middleware: ['auth']
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

Em seguida, você precisa criar login.vue , register.vue e a pasta layouts adicionar o arquivo default.vue .pasta de autenticação laravel 9 sanctum nuxt js

Crie default.vue e navbar com o link nuxt js como login, registro e logout.

visualização padrão

<template>
  <div>
    <nav class="container flex justify-around py-8 mx-auto bg-white">
      <div>
        <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
      </div>
      <div class="flex space-x-8">
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/login" v-if="!$auth.loggedIn">Login</NuxtLink>
        <NuxtLink to="/register" v-if="!$auth.loggedIn">Register</NuxtLink>
        <div v-if="$auth.loggedIn">
          <button
            type="button"
            @click="logout"
          >
            Logout
          </button>
        </div>
      </div>
    </nav>
    <Nuxt />
  </div>
</template>
<script>
export default {
  middleware: "auth",
  methods: {
    async logout() {
      this.$nuxt.$loading.start();
      this.$auth.logout();
      this.$nuxt.$loading.finish();
      this.$router.push("/login");
    },
  },
};
</script>

páginas/registo.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign Up
      </h1>

      <form class="mt-6" ref="registerform" @submit.prevent="register">
        <div>
          <label for="name" class="block text-sm text-gray-800">name</label>
          <input
            v-model="form.name"
            name="name"
            type="text"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password Confirmation</label
            >
            <input
              v-model="form.password_confirmation"
              name="password_confirmation"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  auth: "guest",
    data() {
    return {
      form: {
        name: null,
        email: null,
        password: null,
        password_confirmation: null
      },
      errors: []
    }
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    register() {
      try {
        this.$axios.post("/register", this.form).then((res) => {
          this.$auth.loginWith("laravelSanctum", { data: this.form });
          this.$router.push({
            path: "/",
          });
        });
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

páginas/login.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign In
      </h1>
      <form class="mt-6" @submit.prevent="login">
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Login
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  auth: "guest",
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
    };
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    async login() {
      this.$nuxt.$loading.start();
      try {
        await this.$auth.loginWith("laravelSanctum", { data: this.form });
        this.$router.push({
          path: "/",
        });
      } catch (err) {
        console.log(err);
      }
      this.$nuxt.$loading.finish();
    },
  },
};
</script>

laravel 9 sanctum nuxt js login

páginas/index.vue

<template>
  <div>
    <div class="flex items-center justify-center h-screen">
      <div class="max-w-xl p-5 shadow">
        <div v-if="!$auth.loggedIn">
          <h3>Home</h3>
        </div>
        <div v-if="$auth.loggedIn">
          <div>Name:{{ $auth.user.name }}</div>
          <div>Name:{{ $auth.user.email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
};
</script>

laravel 9 sanctum nuxt js auth

Execute o servidor

npm run dev

Fonte:  https://larainfo.com

#laravel #nuxtjs 

Instalar E Configurar A Autenticação Laravel 9 Sanctum Com NuxtJS

Build a Simple and Easy to Use Website to Stream Anime Without ADS with Vue

A simple and easy to use Website for streaming Anime without ads. 

About The Project

Logo

This website was created out of frustration that most anime streaming sites cause, by either having bad UIs or ads anytime you click on anything. So with that in mind, i tried to create something thats easy to use for anyone, without having used the website before, while also being functional.

Built With

Getting Started

If you want to edit and deploy this website yourself, feel free to do so by using the instructions below.
But please give credit to everyone who helped create this project!

Prerequisites

Inorder for this project to work, you first need to make sure your npm installlation is up-to-date

  • npm
npm install npm@latest -g

Installation

  1. Clone the repo
git clone https://github.com/5H4D0WILA/InuStreamWebsite.git

2.  Install all NPM packages the project uses

npm install

3.  Run the website on localhost

npm run dev

Usage

To use the website without hosting it yourself, go to the Inu's Stream website and search for any anime you desire.

Roadmap

  •  Info Page
  •  Watch Page
    •  Netflix inspired watch page
  •  Basic Homepage
    •  Recent releases
    •  Continue Watching
    •  Trending anime
    •  Popular anime
  •  Login
  •  Responsive UI

See the open issues for a full list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Discord - Inumaki#8590

Project Link: https://github.com/5H4D0WILA/InuStreamWebsite

Acknowledgments

 

Download Details:
 

Author: 5H4D0WILA
Download Link: Download The Source Code
Official Website: https://github.com/5H4D0WILA/InuStreamWebsite#readme-top 
License: MIT license

#nuxtjs #vue #vuejs 

Build a Simple and Easy to Use Website to Stream Anime Without ADS with Vue

A Fully Managed Dashboard Through The Browser

Bender dashboard

A link dashboard that can be managed without any code. Ideal for service listings on your server. Heavily inspired by Homer dashboard and aims to provide the same functionality with one major change, No yaml required!

All links can be managed via the UI including dragging and dropping your links to re-order or change groups. New pages and links can be added via the UI, as can global settings such as the app title, icon and theme.

Bender link dashboard

Under the hood

  • Built using NuxtJS & Vue2
  • Requires no database, all config is stored in a single config file static/config.json
  • FontAwesome solid and brand icons available with inbuilt search
  • Image lookup supported via anything in static/images
  • Light & Dark mode

Running without docker

Running with docker

You should volume mount the /app/static directory as it contains the config.json (the file containing all links and settings which you will want to persist). It also contains an images directory which is used with the image lookup.

docker run -d \
  --name bender \
  -p 8080:8080 \
  -v </your/local/assets/>:/app/static \
  --restart=always \
  jez500/bender:latest

With docker-compose

A docker-compose.yml file is available as an example. It must be edited to match your needs. You probably want to adjust the port mapping and volume binding (equivalent to -p and -v arguments).

Then launch the container:

cd /path/to/docker-compose.yml/
docker-compose up -d

Migrating from Homer

Experimental: Backup static/config.json first.

You can import your links from homer by visiting /import, pasting the Homer YAML then clicking Parse. If the YAML is valid, it should indicate links and groups found. Next, select the page you want to import into and finally click Import links to overwrite all the links on the selected page with what was in the YAML.

Note: If using images, copy them all into static/images.

Developing

To develop locally, you can just run npm run dev and it will serve the app on http://localhost:8080 with live reloading of edits.

All PRs are welcome!

Author

Jeremy Graham

Attribution

Amazing contributors to Homer

Download Details:
 

Download Link: Download The Source Code
Official Website: https://github.com/jez500/bender 
License: Apache-2.0 license

#vuejs #nuxtjs #javascript 

A Fully Managed Dashboard Through The Browser
Thierry  Perret

Thierry Perret

1660322645

Nextjs Vs Nuxtjs : lequel utiliser ?

Il est difficile de suivre le rythme auquel l'écosystème JavaScript évolue avec la publication de nouveaux frameworks chaque année. Comprendre les différents frameworks JavaScript est essentiel, surtout si vous êtes un débutant qui aurait besoin d'une approche plus simple.

Le développement Web frontal moderne n'est pas complet sans les frameworks JavaScript, qui offrent aux programmeurs des outils éprouvés pour créer des applications Web évolutives et dynamiques. Aujourd'hui, la familiarité avec les frameworks est souvent requise pour les métiers du développement front-end, car de nombreuses entreprises modernes les utilisent comme composant d'outillage de base. J'espère que cet article vous fournira un endroit accueillant pour commencer pendant que vous en apprendrez plus sur les différents frameworks.

Il peut être difficile pour les aspirants développeurs front-end de décider par où commencer lors de l'apprentissage des frameworks, car il y a tellement d'options, de nouvelles sont constamment créées, elles fonctionnent en grande partie de la même manière mais effectuent certaines tâches différemment, et il y a certaines choses à surveiller pour l'utilisation de frameworks.

À la fin de cet article, vous serez familiarisé avec les composants de Next.js et NuxtJS et posséderez une compréhension de base des deux frameworks et choisirez ce qui vous convient.

première

Qu'est-ce que NuxtJS ?

NuxtJS est un framework JavaScript gratuit et open source utilisé pour créer des applications Vue.js. Son objectif est de permettre aux développeurs Vue de bénéficier de technologies de pointe de manière simple, rapide et organisée. NuxtJS a été influencé par Next.js, un framework construit sur React.js avec un objectif similaire.

2

La base de votre projet Vue.js est NuxtJS, qui fournit une structure et une flexibilité pour que vous puissiez le construire en toute confiance. En mettant l'accent sur la fourniture d'une expérience de développement fantastique, NuxtJS vise à rendre le développement Web simple et efficace. Vous pouvez vous concentrer sur ce qui compte — créer votre application — grâce à elle.

Les nouvelles fonctionnalités de la version bêta publique de NuxtJS 3, publiées en octobre, ont donné aux développeurs plus de temps pour se concentrer sur la création d'expériences utilisateur exceptionnelles. En conséquence, la croissance de la communauté NuxtJS a explosé.

Écosystème de modules

Pour étendre la base du framework et rationaliser les intégrations, NuxtJS propose un système de modules. Le système de modules d'ordre supérieur proposé par NuxtJS permet d'étendre le noyau. Lorsque NuxtJS démarre, les modules sont des fonctions qui sont appelées dans l'ordre. S'il existe un module NuxtJS pour cela, vous n'avez pas besoin de tout créer à partir de zéro ou de maintenir un passe-partout. "Nuxt.config" peut être utilisé pour ajouter des modules NuxtJS.

Des plugins et des paramètres de configuration peuvent être ajoutés à NuxtJS, mais la gestion de ces ajustements sur divers projets peut être laborieuse, répétitive et chronophage. Cependant, si NuxtJS devait répondre aux exigences de chaque projet prêt à l'emploi, il serait trop compliqué et difficile à utiliser.

C'est l'une des raisons pour lesquelles NuxtJS propose une architecture modulaire qui permet l'extension du noyau. En plus de nombreuses autres activités utiles, ils peuvent configurer des chargeurs de packs Web, installer des bibliothèques CSS et modifier des fichiers modèles. La distribution des modules NuxtJS dans les packages npm est la meilleure partie. Pour en savoir plus sur les modules NuxtJS, cliquez ici et ici .

Importation automatique des composants

Pour effectuer la récupération de données, accéder au contexte de l'application et à la configuration d'exécution, gérer l'état ou créer des composants et des plugins, NuxtJS importe automatiquement les fonctions et composables. Tous les composants de votre répertoire components/ sont immédiatement importés par NuxtJS (ainsi que les composants enregistrés par les modules que vous utilisez).

| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue:

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

Dans NuxtJS 3, nous recevons un nouveau dossier supplémentaire appelé "composables/" qui importera automatiquement la fonction Composition API que vous écrivez. Les composants sont automatiquement importés dans le dossier « components/ » et le routage basé sur les fichiers se trouve dans le dossier « pages/ ». Cliquez ici pour en savoir plus sur les importations automatiques NuxtJS.

Modes de rendu

Le rendu est le processus par lequel le navigateur et le serveur traduisent les composants Vue.js en éléments HTML en lisant le code JavaScript.

Le rendu côté client et le rendu global sont tous deux pris en charge par NuxtJS. Une interface utilisateur (UI) complexe et dynamique avec des transitions de page transparentes peut être créée à l'aide de techniques de rendu côté client. Tout en conservant les avantages du rendu côté client, le rendu universel permet aux applications NuxtJS d'offrir des chargements de page rapides. De plus, puisque le contenu est déjà inclus dans le texte HTML, les crawlers peuvent l'indexer sans effort supplémentaire.

En plus de déterminer comment le serveur doit répondre à une nouvelle requête sur une URL spécifique, le rendu hybride permet diverses règles de mise en cache par route.

Les applications JavaScript ont souvent du mal à gérer le référencement et les balises Meta. En effet, la page est initialement vide lorsque nous nous appuyons sur JavaScript pour obtenir nos données, telles que le contenu et les méta descriptions. De plus, il n'y a aucun élément à indexer ou à traiter avant l'exécution de JavaScript. De plus, de nombreux robots d'exploration ne prennent pas en charge JavaScript. Par conséquent, si vous partagez un article de votre blog JavaScript sur Facebook, il peut apparaître avec le titre "indéfini" plutôt que le titre de l'article d'origine. Le rendu côté serveur (SSR) peut nous sauver de cette situation. L'objectif derrière SSR est d'héberger un serveur qui générera la réponse HTML et la fournira au crawler ou au client. En conséquence, dans l'exemple mentionné ci-dessus, le serveur gérera l'appel à l'API, après quoi les métadonnées seront définies et la page finale sera livrée.

Avec NuxtJS 3, le rendu hybride est désormais possible. Cela vous permettra d'utiliser des fonctionnalités telles que la génération statique incrémentielle, qui combine le rendu côté serveur (SSR) et la génération de site statique (SSG), ainsi que d'autres modes sophistiqués. Les modes de rendu peuvent également être trouvés ici et ici .

Routage du système de fichiers

Pour chaque page, NuxtJS propose un routage et un fractionnement de code automatiques. NuxtJS crée automatiquement la configuration Vue-router en fonction de votre arborescence de fichiers Vue dans le répertoire des pages. Vous n'avez pas besoin de faire de configuration supplémentaire une fois que vous avez créé un fichier .vue dans le répertoire de vos pages pour que le routage de base fonctionne.

Cette arborescence de fichiers :

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

générera automatiquement :

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

En utilisant Vue Router comme backend, un routage basé sur des fichiers peut être utilisé pour construire des routes dans votre application en ligne. Si vous utilisez uniquement app.vue, vue-router ne sera pas inclus car ce répertoire est facultatif, ce qui réduit la taille du bundle de votre application. Tout au long de votre application, NuxtJS propose un framework middleware de route personnalisé, parfait pour extraire le code que vous souhaitez exécuter avant de passer à une route spécifique.

L'exécution dans le composant Vue de votre application NuxtJS est un middleware de route. Bien qu'ils aient un nom similaire, ils ne sont pas identiques au middleware serveur qui s'exécute sur le serveur Nitro de votre application. Vous trouverez plus d'informations sur le routage de fichiers NuxtJS ici .

Configuration zéro

La configuration par défaut de NuxtJS couvre la majorité des cas d'utilisation. Le fichier nuxt.config.js permet de remplacer la configuration par défaut. Vous pouvez utiliser NuxtJS pour spécifier les fichiers, modules et bibliothèques CSS globaux que vous souhaitez utiliser (inclus sur chaque page). Ajoutez ces ressources CSS à nuxt.config.js :

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
  ]
}

NuxtJS déterminera automatiquement le type de fichier en fonction de son extension et utilisera le bon chargeur de préprocesseur pour Webpack. Vous devez toujours installer le chargeur nécessaire si vous souhaitez les utiliser. Vous pouvez omettre l'extension de fichier pour les fichiers spécifiés dans le tableau CSS de votre fichier de configuration NuxtJS, tels que CSS, SCSS, Postcss, Less, Stylus, etc.

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

NuxtJS gère le reste lorsque vous travaillez directement sur le code de votre application. Voici plus d'informations sur la configuration de NuxtJS.

Récupération de données

Vous pouvez utiliser NuxtJS pour obtenir du contenu de n'importe quelle source dans vos composants Vue compatibles SSR. NuxtJS propose la méthode Fetch et la méthode asyncData comme ses deux (2) méthodes pour obtenir des données à partir d'une API.

Une fois l'instance du composant établie, Fetch est un crochet appelé à la fois sur le client pendant la navigation et le rendu côté serveur. Le hook de récupération doit (explicitement ou implicitement via async/await) renvoyer une promesse qui sera remplie : avant que la première page ne soit rendue sur le serveur et après que le composant a été monté sur le client.

Lors de l'utilisation d'un hébergement statique , le hook de récupération n'est utilisé que lors de la création de pages, et la sortie est ensuite mise en cache pour une utilisation par le client. Il peut être indispensable de donner un nom à votre composant ou, à défaut, de proposer une implémentation spéciale de fetchKey pour éviter les conflits de cache.

asyncData est un autre crochet pour la récupération globale des données . Contrairement à Fetch, qui vous oblige à exécuter des actions Vuex ou à modifier les propriétés de l'instance du composant pour préserver votre état asynchrone, asyncData combine simplement la valeur de retour avec l'état local de votre composant. En utilisant la bibliothèque @nuxt/http, considérez l'exemple suivant :

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

N/B : asyncData est uniquement accessible pour les pages ; le crochet n'y a pas accès. Vous trouverez plus d'informations sur l'extraction de données dans ce guide .

Optimisation du référencement

Vous avez trois options avec NuxtJS pour inclure des métadonnées dans votre application :

  1. Utilisation globale de nuxt.config.js
  2. Utilisation locale de la tête comme objet
  3. Utilisation locale de la tête en tant que fonction pour récupérer des données et des propriétés calculées

NuxtJS offre une gestion des balises meta et un temps de mise au contenu plus rapide pour une excellente indexation. Voici plus de guide sur les balises Meta et le référencement.

Avantages de NuxtJS

NuxtJS est extensible et simplifie l'intégration de vos points de terminaison REST ou GraphQL préférés, CMS, frameworks CSS, etc., grâce à son écosystème de modules robuste et à son moteur de crochets. Voici quelques-uns des nombreux avantages de l'utilisation de NuxtJS :

  • Vous pouvez déployer des applications Vue complètes rapides et optimisées pour le référencement à l'aide de NuxtJS, qui fournit également une solution convaincante et un excellent écosystème.
  • Grâce à son approche innovante, NuxtJS accélère la création et la fonctionnalité de votre futur site Web ou application en fusionnant une superbe expérience de développeur avec des fonctionnalités réutilisables et entièrement intégrées.
  • La simplicité et la courbe d'apprentissage progressive de NuxtJS en font une option fantastique.
  • Entre le rendu côté serveur (SSR) et la génération de site statique, NuxtJS offre la polyvalence (SSG).
  • En plus de sa configuration et de sa structure avisées, NuxtJS offre un fractionnement automatique du code, un travail d'équipe efficace et une disposition et des conventions de répertoire solides.

Inconvénients de NuxtJS

Chaque avantage a un inconvénient correspondant. Les inconvénients de l'utilisation de NuxtJS sont énumérés ci-dessous :

  • Il y a moins de ressources et peut-être une documentation produit moins complète disponible pour NuxtJS en raison de sa petite communauté.
  • Sur votre serveur, un trafic élevé peut être particulièrement éprouvant.
  • Seuls des Hooks spécifiques vous permettent d'interagir avec et d'interroger le DOM.
  • Il peut être difficile de faire fonctionner des bibliothèques personnalisées avec NuxtJS.
  • Il existe sans aucun doute des plugins populaires et fiables ou des éléments manquants, tels que Calendar, Google Maps, des cartes vectorielles, etc. Bien qu'il existe des composants supplémentaires, ils ne sont généralement pas bien entretenus.

Qu'est-ce que Next.js ?

Next.js est le meilleur outil pour tout développeur React pour apprendre et améliorer ses projets. Il s'agit d'un framework de développement Web open source construit sur Node.js et facilite le rendu côté serveur et le déploiement de sites Web statiques pour les applications Web basées sur React.

La meilleure expérience de développement est fournie par Next.js, qui possède toutes les fonctionnalités requises pour la production, y compris la prise en charge de TypeScript, le regroupement intelligent, la pré-extraction de routes et le rendu hybride statique et serveur. Il n'est pas nécessaire de configurer.

4

Plusieurs fonctionnalités de pointe offertes par Next.js feront progresser votre candidature en ligne. Les fonctionnalités de Next.js sont les suivantes :

Routage du système de fichiers

Utilisant l'idée des pages comme base, Next.js dispose d'un routeur basé sur le système de fichiers. Une route devient automatiquement disponible lorsqu'un fichier est ajouté au répertoire des pages. Vous pouvez définir la plupart des motifs à l'aide des fichiers du répertoire pages.

Les segments pour l'itinéraire indexé, l'itinéraire imbriqué et les itinéraires dynamiques sont disponibles ici. Le routeur dirigera automatiquement les fichiers avec le nom index vers la racine du répertoire lors de l'utilisation de cette route d'index.

'pages/index.js' → '/'
'pages/blog/index.js' → '/blog'

Le routeur est compatible avec les fichiers imbriqués dans la route imbriquée, et une structure de dossiers imbriqués transportera toujours automatiquement les fichiers de la même manière.

'pages/blog/first-post.js' → '/blog/first-post'
'pages/dashboard/settings/username.js' → '/dashboard/settings/username'

De plus, vous pouvez utiliser la syntaxe des parenthèses dans les segments de route dynamiques. Vous pouvez maintenant faire correspondre des paramètres nommés grâce à cela.

'pages/blog/[slug].js' → '/blog/:slug' ('/blog/hello-world')
'pages/[username]/settings.js' → '/:username/settings' ('/foo/settings')
'pages/post/[...all].js' → '/post/*' ('/post/2020/id/title')

Consultez la documentation des itinéraires pour en savoir plus sur leur fonctionnement.

Rendu côté serveur

Selon le cas d'utilisation de votre application, la récupération de données dans Next.js vous permet de restituer vos informations de différentes manières. Celles-ci incluent le rendu préalable à l'aide de la génération de site statique (SSG) ou du rendu côté serveur (SSR), ainsi que la création ou la mise à jour de contenu dynamique à l'aide de la régénération statique incrémentielle. Next.js pré-rendra une page en utilisant les informations fournies par une fonction appelée 'getServerSideProps' (Server-Side Rendering) si vous l'exportez à partir d'une page.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Chaque 'prop' sera envoyé au composant de la page quelle que soit la méthode de rendu, et le premier code HTML peut être lu côté client. Pour bien hydrater la page, cela est nécessaire.

Génération de sites statiques

Une liste de chemins qui doivent être créés statiquement doit être définie si une page utilise 'getStaticProps' et contient des routes dynamiques. Tous les chemins fournis par une fonction appelée « getStaticPaths » (génération de site statique) exportés à partir d'une page qui utilise des itinéraires dynamiques seront pré-rendus statiquement par Next.js.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

La référence API couvre toutes les options et propriétés qui peuvent être utilisées avec 'getStaticPaths'. Next.js pré-rend les pages au moment de la construction (SSG) ou au moment de la demande (SSR) dans un seul projet.

Optimisation des images

L'élément HTML imga été étendu pour le Web moderne par le composant 'next/image' de Next.js. Vous pouvez obtenir de bons Core Web Vitals à l'aide d'une gamme d'améliorations de performances intégrées. Ces notes sont un indicateur crucial de la façon dont les utilisateurs réagissent à votre site Web et sont prises en compte par Google lors de la détermination des résultats de recherche. Next.js calculera automatiquement la largeur et la hauteur de l'image en utilisant le fichier importé comme base. Pendant le chargement de votre image, ces paramètres sont utilisés pour arrêter les décalages de mise en page cumulatifs .

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt= "Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

Fractionnement de code automatique

Seuls le JavaScript et les bibliothèques nécessaires au rendu des pages sont utilisés. Au lieu de créer un seul fichier JavaScript contenant tout le code de l'application, Next.js divise automatiquement l'application en plusieurs ressources. Seul le JavaScript requis pour cette page spécifique est chargé lorsqu'une page est chargée. Pour y parvenir, Next.js examine les ressources importées.

Une exception notable existe. Si une importation est utilisée dans au moins 50 % des pages du site, elle est déplacée dans le groupe JavaScript principal.

Prise en charge des scripts dactylographiés

Next.js a une forte prise en charge de TypeScript car il est écrit en TypeScript. Avec une configuration sans configuration et des types intégrés pour les pages, les API, etc., Next.js offre une expérience TypeScript intégrée. À l'aide de l'indicateur '—ts, —typescript', vous pouvez utiliser 'create-next-app' pour créer un projet TypeScript comme suit :

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

La vérification de type est une fonctionnalité standard de la « prochaine génération » de Next.js. Pour en savoir plus sur le tapuscrit Next.js, cliquez ici .

Itinéraire API

L'une des fonctionnalités révolutionnaires de Next.js est son approche tout-en-un pour créer des applications React complètes en vous permettant d'écrire du code serveur à l'aide de routes API. Les routes d'API de Next.js offrent un moyen de construire votre API.

Tout fichier du dossier 'pages/api' est mappé sur '/api/*' et est traité plus comme un point de terminaison d'API que comme une 'page'. Ils n'augmentent pas la taille de votre bundle côté client car ce sont des bundles côté serveur uniquement.

Avantages de Next.js

Les entreprises les plus grandes et les plus connues dans le monde utilisent fréquemment Next.js. Il est considéré comme l'un des frameworks React avec l'un des taux de croissance les plus élevés et est excellent pour une utilisation avec des sites statiques. Les avantages d'adopter Next sont les suivants :

  • Pour le référencement, Next.js est fantastique. Il vous permet de créer des applications Web avec toutes les fonctionnalités et l'interactivité nécessaires tout en conservant les avantages SEO d'une page Web textuelle statique. Vous pouvez établir une puissante présence en ligne grâce à cela.
  • L'expérience utilisateur est excellente avec Next.js. Vous n'êtes pas tenu de respecter les plug-ins, modèles ou autres limitations imposées par les plates-formes de commerce électronique ou CMS. Vous avez toute liberté pour modifier le front-end comme bon vous semble, et vous pouvez également modifier les choses de manière créative sans aucune restriction.
  • Les performances de votre site Web ou de votre application Web sont améliorées à l'aide de Next.js. Bien que le téléchargement et l'exécution d'une quantité importante de code JavaScript à la fois n'entraînent pas l'arrêt du navigateur, cela peut considérablement améliorer les mesures telles que le temps de blocage total (TBT). Visez toujours un temps inférieur à 300 ms. Plus votre TBT augmente rapidement, plus les gens trouveront rapidement de la valeur dans votre application en ligne.
  • Votre site Web ou votre application sera sécurisé si vous utilisez Next.js. Les sites Web statiques Next.js n'ont aucune connexion directe à la base de données, aux dépendances, aux données utilisateur ou à toute autre donnée privée, car ils n'ont aucune de ces choses. La sécurité des données est ainsi garantie.
  • Webpack, un composant de Next.js, permet une assistance prête à l'emploi pour la compilation d'actifs, le rechargement à chaud et le fractionnement de code, qui peuvent tous accélérer le développement. Au fur et à mesure que React et Next.js deviennent plus populaires, la communauté des développeurs qui les utilise aussi. Il sera simple de trouver une entreprise ou un entrepreneur indépendant pour apporter des modifications. Le meilleur support pour la compilation d'actifs, le fractionnement de code et le rechargement à chaud est systématiquement trouvé par les développeurs comme étant fourni par Next.js.

Inconvénients de Next.js

Bien que Next.js offre une expérience de développement fantastique, il y a toujours des limites. L'équipe Next.js travaille d'arrache-pied pour résoudre les problèmes. Ainsi, les contraintes deviennent de plus en plus petites chaque jour. Voici quelques restrictions sur l'utilisation de Next.js :

  • Un écosystème de plugin faible existe pour Next.js. Les plugins simples à adapter sont limités dans leur utilisation.
  • Il n'y a pas non plus de gestionnaire d'état interne. Cela implique que vous devez inclure Redux, MobX ou un autre gestionnaire d'état dans votre application si vous en avez besoin.
  • Il y a un inconvénient à la polyvalence qu'offre Next.js, et c'est la maintenance continue. Vous aurez besoin d'une personne engagée possédant les connaissances nécessaires pour mettre en œuvre avec succès les ajustements demandés.
  • Un seul routeur est autorisé à être utilisé par Next.js. En d'autres termes, la méthode qui utilise les itinéraires ne peut pas être modifiée. Si votre projet implique des routes dynamiques, vous devez utiliser le serveur Node.js.

Next.js vs NuxtJS Comparaison

Next.js est le premier choix des développeurs lors de la création d'applications Web sophistiquées en raison de sa capacité à créer rapidement des sites Web complexes. Les développeurs de Next.js le présentent comme une chaîne d'outils à commande unique et sans configuration pour les projets React. Il s'agit d'un framework React qui gère de manière transparente le rendu côté serveur pour vous et offre une architecture commune qui simplifie la construction d'une application React frontale. Lorsque Next.js remarque une modification enregistrée sur le disque, la page est rechargée. Il fonctionne bien avec d'autres composants JavaScript, Node et React. Avant de transmettre le code HTML au client, vous pouvez restituer les composants React côté serveur à l'aide de Next.js.

Un framework Vue.js très apprécié est NuxtJS. Il facilite la construction de programmes Vue.js monopage ou globaux pour le Web. Le framework NuxtJS vise à être suffisamment polyvalent pour servir de base de projet principale aux développeurs Web. Vous pouvez vous concentrer sur la logique de votre application web en partageant le même code entre le serveur et le client grâce à NuxtJS. NuxtJS vous permet d'accéder à de nombreuses propriétés sur vos composants, telles que "isClient" et "isServer", afin que vous puissiez déterminer rapidement si vous rendez quelque chose sur le serveur ou le client. Ce n'est que le début de la longue liste d'avantages de NuxtJS pour le développement d'applications Web universelles.

Next.js est-il meilleur que NuxtJS ?

Il n'y a pas de structure supérieure. Cela dépend de ce que vous trouvez efficace et de ses diverses qualités.

En substance, Next.js est un framework React qui peut être utilisé lorsqu'un utilisateur a besoin d'un rendu rapide dans des circonstances difficiles.

D'autre part, NuxtJS est un framework Vue qui aide à rationaliser et à accélérer le processus de développement Web.

Meilleurs cas d'utilisation pour NuxtJS

NuxtJS a été créé pour résoudre les problèmes associés à la création d'applications à page unique (SPA), qui sont au centre de nombreux frameworks JavaScript contemporains. L'application de la convention sur la stratégie de configuration est l'application la plus distinctive de NuxtJS. Vous n'avez pas besoin de créer de nombreux fichiers de configuration lorsque vous utilisez NuxtJS. Au lieu de cela, vous configurez la structure des dossiers afin que NuxtJS puisse la comprendre, puis construisez le groupe final de l'application par la suite.

Le bundle hautement optimisé de votre application est créé à l'aide de NuxtJS. Un exemple de cas d'utilisation est les sites Storyblok et Pentest Tools .

Meilleurs cas d'utilisation pour Next.js

L'une des meilleures fonctionnalités de Next.js est que vous pouvez créer des pages statiques qui fonctionnent néanmoins comme des pages dynamiques. C'est idéal lorsque : (a) le contenu sera modifié régulièrement ou doit être à jour à tout moment. (b) Des capacités de publication en temps réel sont nécessaires, par exemple, pour les sites multi-utilisateurs. (c) La reconstruction de l'intégralité du site Web prendrait beaucoup de temps (et d'argent) en utilisant SSG et ne présente aucun risque. Un important site Web de commerce électronique en est un bon exemple.

Next.js aide les programmeurs à éviter les problèmes typiques. Next.js empêche les développeurs d'ajouter accidentellement des problèmes, tels que la surextraction en profondeur dans l'arborescence des composants, en fournissant une abstraction unique pour effectuer des tâches d'interface utilisateur complexes. Les développeurs ont compris exactement où chercher pour acquérir de nouvelles données si nécessaire. Les API sous-jacentes complexes n'avaient pas besoin d'être apprises par qui que ce soit.

Quelques très bonnes études de cas sont les sites Hulu et Typeform .

Conclusion

Les avantages et les inconvénients des frameworks Next.js et NuxtJS peuvent être clairs pour vous une fois que vous aurez lu l'intégralité du texte. Nous ne saurions trop insister sur la prévalence de Javascript et sur la façon dont presque toutes les applications mobiles et en ligne actuelles sont construites à l'aide de celui-ci, ce qui rend nécessaire l'utilisation de frameworks comme Next.js et NuxtJS. Par conséquent, il faut sélectionner et utiliser le cadre le plus efficace pour ses besoins. J'espère que cet article vous aidera à choisir entre Next.js et NuxtJS pour votre prochain projet.

Lien : https://blog.openreplay.com/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses

#nuxtjs #nextjs #javascript

Nextjs Vs Nuxtjs : lequel utiliser ?
Hans  Marvin

Hans Marvin

1660315406

Nextjs Vs Nuxtjs: Which one Should You Use ?

In this tutorial, We'll learn Nextjs Vs Nuxtjs: Which one Should You Use ?

It is challenging to keep up with the rate at which the JavaScript ecosystem is evolving with the release of new frameworks every year. Understanding the different JavaScript frameworks is vital, especially if you are a beginner who would require a more straightforward approach.

Modern front-end web development is not complete without JavaScript frameworks, which give programmers tried-and-true tools for creating scalable, dynamic web applications. Today, familiarity with frameworks is often required for front-end development professions because so many modern businesses use them as a basic tooling component. I hope this article will provide a welcoming place to start while you learn about the different frameworks.

It can be challenging for aspiring front-end developers to decide where to start when learning frameworks because there are so many options, new ones are constantly being created, they largely operate similarly but perform some tasks differently, and there are some things to watch out for when utilizing frameworks.

See more at: https://blog.openreplay.com/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses

#nextjs #nuxtjs #javascript

Nextjs Vs Nuxtjs: Which one Should You Use ?
田辺  亮介

田辺 亮介

1660308123

Nextjs 與 Nuxtjs:你應該使用哪一個?

隨著每年新框架的發布,要跟上 JavaScript 生態系統的發展速度是一項挑戰。了解不同的 JavaScript 框架至關重要,尤其是如果您是需要更直接方法的初學者。

如果沒有 JavaScript 框架,現代前端 Web 開發是不完整的,它為程序員提供了可靠的工具來創建可擴展的動態 Web 應用程序。今天,前端開發專業通常需要熟悉框架,因為許多現代企業都將它們用作基本的工具組件。我希望本文能為您在了解不同框架時提供一個很好的起點。

對於有抱負的前端開發人員來說,在學習框架時決定從哪裡開始可能具有挑戰性,因為有很多選擇,不斷創建新的,它們在很大程度上操作相似但執行某些任務不同,還有一些需要注意的事情在使用框架時。

在本文結束時,您將熟悉Next.jsNuxtJS的組件,並對這兩個框架有基本的了解並選擇適合您的。

第一的

什麼是 NuxtJS?

NuxtJS 是一個免費的開源 JavaScript 框架,用於構建 Vue.js 應用程序。它的目標是讓 Vue 開發人員從尖端技術中受益,使其變得簡單、快速和有條理。NuxtJS 受到 Next.js 的影響,Next.js 是一個基於 React.js 構建的框架,具有類似的目標。

2

您的 Vue.js 項目的基礎是 NuxtJS,它提供了結構和靈活性,因此您可以放心地構建它。NuxtJS 專注於提供出色的開發人員體驗,旨在使 Web 開髮變得簡單有效。你可以專注於重要的事情——創建你的應用程序——用它。

NuxtJS 3 公測版中的新功能於 10 月發布,讓開發人員有更多時間專注於創造出色的用戶體驗。結果,NuxtJS 社區的發展呈爆炸式增長。

模塊生態系統

為了擴展框架的基礎並簡化集成,NuxtJS 提供了一個模塊系統。NuxtJS 提供的高階模塊系統使內核得以擴展。NuxtJS 啟動時,模塊是按順序調用的函數。如果有一個現有的 NuxtJS 模塊,您不需要從頭開始創建它或維護樣板。“Nuxt.config”可用於添加 NuxtJS 模塊。

可以將插件和配置設置添加到 NuxtJS,但在各種項目中管理這些調整可能是費力、重複和耗時的。但是,如果 NuxtJS 要開箱即用地滿足每個項目的要求,那麼使用起來會過於復雜和具有挑戰性。

這是 NuxtJS 提供模塊化架構以支持核心擴展的原因之一。除了許多其他有用的活動外,他們還可以配置 webpack 加載器、安裝 CSS 庫和更改模板文件。NuxtJS 模塊在 npm 包中的分佈是最好的部分。要了解有關 NuxtJS 模塊的更多信息,請單擊此處此處

組件自動導入

為了執行數據獲取、訪問應用程序上下文和運行時配置、管理狀態或構建組件和插件,NuxtJS 自動導入函數和可組合項。您的 components/ 目錄中的任何組件都會立即由 NuxtJS 導入(以及您可能正在使用的任何模塊註冊的組件)。

| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

在 NuxtJS 3 中,我們收到了一個名為“composables/”的新文件夾,它將自動導入您編寫的 Composition API 函數。組件在“components/”文件夾中自動導入,基於文件的路由在“pages/”文件夾中。單擊此處了解有關 NuxtJS 自動導入的更多信息。

渲染模式

渲染是瀏覽器和服務器通過讀取 JavaScript 代碼將 Vue.js 組件轉換為 HTML 元素的過程。

NuxtJS 支持客戶端和全局渲染。可以使用客戶端呈現技術創建具有無縫頁面轉換的複雜動態用戶界面 (UI)。在保持客戶端渲染優勢的同時,通用渲染使 NuxtJS 應用程序能夠提供快速的頁面加載。此外,由於內容已經包含在 HTML 文本中,爬蟲可以不費力地對其進行索引。

除了確定服務器應如何響應特定 URL 上的新請求外,混合渲染還允許每個路由使用各種緩存規則。

JavaScript 應用程序經常難以處理 SEO 和 Meta 標籤。這是因為當我們依賴 JavaScript 來獲取我們的數​​據(例如內容和元描述)時,頁面最初是空的。此外,在執行 JavaScript 之前沒有要索引或處理的材料。此外,很多爬蟲不支持 JavaScript。因此,如果您在 Facebook 上分享來自 JavaScript 博客的文章,則該文章的標題可能會顯示為“未定義”,而不是原始文章的標題。服務器端渲染(SSR)可以在這種情況下拯救我們。SSR 背後的目標是託管一個服務器,該服務器將生成 HTML 響應並將其提供給爬蟲或客戶端。因此,在上面提到的示例中,服務器將處理對 API 的調用,之後將設置元數據,並傳遞最終頁面。

使用 NuxtJS 3,現在可以進行混合渲染。這將使您可以使用增量靜態生成等功能,它結合了服務器端渲染 (SSR) 和靜態站點生成 (SSG) 以及其他復雜模式。渲染模式也可以在這里這裡找到。

文件系統路由

對於每個頁面,NuxtJS 都提供自動路由和代碼拆分。NuxtJS 會根據 pages 目錄中的 Vue 文件樹自動創建 Vue-router 配置。在頁面目錄中創建 .vue 文件以使基本路由正常工作後,您無需進行任何其他配置。

這個文件樹:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

會自動生成:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

使用 Vue Router 作為後端,可以使用基於文件的路由在您的在線應用程序中構建路由。如果您只使用 app.vue,則不會包含 vue-router,因為此目錄是可選的,從而減少了應用程序的包大小。在整個應用程序中,NuxtJS 提供了一個定制的路由中間件框架,非常適合在轉到特定路由之前提取要執行的代碼。

在 NuxtJS 應用程序的 Vue 組件中運行的是路由中間件。儘管名稱相似,但它們與在應用的 Nitro 服務器上運行的服務器中間件不同。可以在此處找到有關 NuxtJS 文件路由的更多信息。

零配置

NuxtJS 的默認配置涵蓋了大多數用例。nuxt.config.js 文件允許替換默認配置。您可以使用 NuxtJS 指定要使用的全局 CSS 文件、模塊和庫(包含在每個頁面上)。將這些 CSS 資源添加到 nuxt.config.js:

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
  ]
}

NuxtJS 將根據其擴展名自動確定文件的類型,並為 webpack 使用適當的預處理器加載器。如果你想使用它們,你仍然必須安裝必要的加載器。您可以省略 NuxtJS 配置文件中 CSS 數組中指定的文件的文件擴展名,例如 CSS、SCSS、Postcss、Less、Stylus 等。

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

當您直接處理應用程序代碼時,NuxtJS 會處理其餘部分。這是有關 NuxtJS 配置的更多信息。

數據獲取

您可以使用 NuxtJS 將任何來源的內容獲取到支持 SSR 的 Vue 組件中。NuxtJS 提供Fetch 方法asyncData 方法作為從 API 獲取數據的兩 (2) 種方法。

組件實例建立後,Fetch是一個鉤子,在導航和服務器端渲染期間都會在客戶端調用。fetch 鉤子應該(通過 async/await 顯式或隱式地)返回一個將被履行的承諾:在第一頁呈現在服務器上之前,以及在組件安裝到客戶端之後。

使用靜態託管時,僅在創建頁面時使用 fetch 掛鉤,然後緩存輸出以供客戶端使用。為您的組件提供一個名稱可能很重要,否則,提供一個特殊的 fetchKey 實現以防止緩存衝突。

全局數據檢索的另一個鉤子是asyncData。與 Fetch 不同,它要求您執行 Vuex 操作或更改組件實例的屬性以保留您的異步狀態,asyncData 只是將返回值與組件的本地狀態相結合。使用 @nuxt/http 庫,考慮以下示例:

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

N/B:asyncData只能由頁面訪問;鉤子無法訪問它。可以在本指南中找到有關數據獲取的更多信息。

SEO優化

NuxtJS 有三個選項可以在應用程序中包含元數據:

  1. 全局使用 nuxt.config.js
  2. 局部利用頭部作為對象
  3. 在本地使用 head 作為函數來檢索數據和計算屬性

NuxtJS 提供元標記管理和更快的內容以實現出色的索引。這是有關元標記和 SEO 的更多指南。

NuxtJS 的優點

NuxtJS 是可擴展的,並且由於其強大的模塊生態系統和鉤子引擎,可以輕鬆集成您最喜歡的 REST 或 GraphQL 端點、CMS、CSS 框架等。以下是使用 NuxtJS 的眾多好處中的一部分:

  • 您可以在 NuxtJS 的幫助下部署快速且對 SEO 友好的全棧 Vue 應用程序,它還提供了一個引人注目的解決方案和一個偉大的生態系統。
  • 憑藉其創新方法,NuxtJS 將卓越的開發人員體驗與可重用、完全集成的功能融合在一起,從而加速您即將推出的網站或應用程序的創建和功能。
  • NuxtJS 的簡單性和循序漸進的學習曲線使其成為一個絕佳的選擇。
  • 在服務器端渲染 (SSR) 和靜態站點生成之間,NuxtJS 提供了多功能性 (SSG)。
  • 除了自以為是的設置和結構外,NuxtJS 還提供自動代碼拆分、有效的團隊合作以及可靠的目錄佈局和約定。

NuxtJS 的缺點

每個好處都有一個匹配的缺點。下面列出了使用 NuxtJS 的缺點:

  • 由於 NuxtJS 的社區較小,因此可用的資源較少,而且可能不太完整的產品文檔。
  • 在您的服務器上,高流量可能特別費力。
  • 只有特定的 Hooks 允許您與 DOM 交互和查詢。
  • 讓自定義庫與 NuxtJS 一起使用可能具有挑戰性。
  • 毫無疑問,有一些流行的、可靠的插件或缺少的元素,例如日曆、谷歌地圖、矢量地圖等。雖然還有額外的組件,但它們通常都沒有得到很好的維護。

Next.js 是什麼?

Next.js 是任何 React 開發人員學習和改進項目的最佳工具。它是一個構建在 Node.js 之上的開源 Web 開發框架,可促進服務器端渲染和為基於 React 的 Web 應用程序部署靜態網站。

Next.js 提供了最好的開發人員體驗,它具有生產所需的所有功能,包括 TypeScript 支持、智能捆綁、路由預取以及混合靜態和服務器渲染。無需配置。

4

Next.js 提供的幾項尖端功能將推動您的在線應用程序。Next.js 的特點如下:

文件系統路由

以頁面為基礎,Next.js 有一個基於文件系統的路由器。將文件添加到 pages 目錄時,路由將自動變為可用。您可以使用 pages 目錄中的文件定義大多數模式。

索引路由、嵌套路由和動態路由的分段在此處可用。當使用這個 Index 路由時,路由器會自動將名稱為 index 的文件定向到目錄的根目錄。

'pages/index.js' → '/'
'pages/blog/index.js' → '/blog'

路由器與嵌套路由中的嵌套文件兼容,嵌套文件夾結構仍會類似地自動傳輸文件。

'pages/blog/first-post.js' → '/blog/first-post'
'pages/dashboard/settings/username.js' → '/dashboard/settings/username'

此外,您可以在動態路徑段中使用括號語法。由於這一點,您現在可以匹配命名參數。

'pages/blog/[slug].js' → '/blog/:slug' ('/blog/hello-world')
'pages/[username]/settings.js' → '/:username/settings' ('/foo/settings')
'pages/post/[...all].js' → '/post/*' ('/post/2020/id/title')

查看路線文檔以了解有關它們如何工作的更多信息。

服務器端渲染

根據您的應用程序的用例,Next.js 中的數據獲取使您能夠以各種方式呈現您的信息。這些包括使用靜態站點生成 (SSG) 或服務器端呈現 (SSR) 預先呈現,以及使用增量靜態再生來創建或更新動態內容。如果您從頁面導出,Next.js 將使用名為“getServerSideProps”(服務器端渲染)的函數提供的信息預渲染頁面。

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

無論呈現方法如何,每個“prop”都將發送到頁面組件,並且可以在客戶端讀取第一個 HTML。為了適當地滋潤頁面,這是必要的。

靜態站點生成

如果頁面使用“getStaticProps”並包含動態路由,則必須定義應靜態創建的路徑列表。從使用動態路由的頁面導出的名為“getStaticPaths”(靜態站點生成)的函數提供的任何路徑都將由 Next.js 靜態預渲染。

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

API 參考涵蓋了可與“getStaticPaths”一起使用的所有選項和屬性。Next.js 在單個項目的構建時 (SSG) 或請求時 (SSR) 預呈現頁面。

圖像優化

imgNext.js 的“next/image”組件已經為現代網絡擴展了HTML元素。借助一系列內置的性能增強功能,您可以獲得良好的 Core Web Vitals。這些評級是衡量用戶對您網站的反應程度的重要指標,並且在確定搜索結果時會被 Google 考慮。Next.js 會以導入的文件為基礎,自動計算圖片的寬高。在加載圖像時,這些設置用於停止累積佈局移位

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt= "Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

自動分碼

僅使用呈現頁面所需的 JavaScript 和庫。Next.js 不是創建包含所有應用程序代碼的單個 JavaScript 文件,而是自動將應用程序劃分為多個資源。加載頁面時,僅加載該特定頁面所需的 JavaScript。為了實現它,Next.js 會檢查導入的資源。

存在一個值得注意的例外。如果在至少 50% 的網站頁面中使用了導入,則將其移動到主 JavaScript 包中。

打字稿支持

Next.js 具有強大的 TypeScript 支持,因為它是由 TypeScript 編寫的。通過零配置設置和頁面、API 等的內置類型,Next.js 提供了集成的 TypeScript 體驗。使用 '-ts, --typescript flag',您可以使用 'create-next-app' 創建一個 TypeScript 項目,如下所示:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

類型檢查是 Next.js 的“下一個構建”的標準功能。要了解有關 Next.js 打字稿的更多信息,請單擊此處

API 路由

Next.js 改變遊戲規則的功能之一是它通過使您能夠使用 API 路由編寫服務器代碼來構建全棧 React 應用程序的一體化方法。Next.js 的 API 路由提供了一種構建 API 的方法。

'pages/api' 文件夾中的任何文件都映射到 '/api/*' 並且處理起來更像 API 端點而不是 'page'。它們不會增加客戶端捆綁包的大小,因為它們只是服務器端捆綁包。

Next.js 的優點

全球最大和最知名的企業經常使用 Next.js。它被認為是增長率最高的 React 框架之一,非常適合用於靜態站點。採用Next的優點如下:

  • 對於 SEO,Next.js 非常棒。它使您能夠創建具有所有必要功能和交互性的 Web 應用程序,同時保留基於靜態文本的網頁的 SEO 優勢。多虧了它,您可以建立強大的在線形象。
  • Next.js 的用戶體驗非常好。您無需遵守電子商務或 CMS 平台施加的任何插件、模板或其他限制。你有完全的自由來改變你認為合適的前端,你也可以不受任何限制地創造性地編輯東西。
  • 使用 Next.js 可以增強您的網站或 Web 應用程序的性能。雖然一次下載和運行大量 JavaScript 代碼不會導致瀏覽器停止,但它可以大大提高總阻塞時間 (TBT) 等指標。始終瞄準小於 300 毫秒的時間。您的 TBT 增加得越快,人們就會越快在您的在線應用中發現價值。
  • 如果您使用 Next.js,您的網站或應用程序將是安全的。Next.js 靜態網站與數據庫、依賴項、用戶數據或任何其他私有數據沒有任何直接連接,因為它們沒有任何這些東西。從而保證數據安全。
  • Webpack 是 Next.js 的一個組件,它允許對資產編譯、熱重載和代碼拆分提供開箱即用的幫助,所有這些都可以加快開發速度。隨著 React 和 Next.js 越來越流行,使用它們的開發者社區也越來越流行。找到一家企業或獨立承包商進行更改將很容易。開發人員一致認為 Next.js 提供了對資產編譯、代碼拆分和熱重載的最佳支持。

Next.js 的缺點

儘管 Next.js 提供了出色的開發體驗,但始終存在局限性。Next.js 團隊正在努力解決這些問題。因此,約束每天都在變得越來越小。以下是對 Next.js 使用的一些限制:

  • Next.js 存在一個弱插件生態系統。易於適應的插件在使用方面受到限制。
  • 也沒有內部狀態管理器。這意味著如果需要,您必須在應用程序中包含 Redux、MobX 或其他狀態管理器。
  • Next.js 提供的多功能性有一個缺點,那就是持續維護。您將需要一個具有必要知識的敬業人員來成功實施任何請求的調整。
  • Next.js 只允許使用一個路由器。換句話說,使用路由的方法無法調整。如果您的項目涉及動態路由,則必須使用 Node.js 服務器。

Next.js 與 NuxtJS 比較

Next.js 是開發人員構建複雜 Web 應用程序的首選,因為它能夠快速構建複雜的網站。Next.js 的開發人員將其推廣為 React 項目的單命令、零配置工具鏈。它是一個 React 框架,可以透明地為您管理服務器端渲染,並提供一個通用架構,使構建前端 React 應用程序變得簡單。當 Next.js 注意到保存到磁盤的修改時,頁面會重新加載。它與其他 JavaScript、Node 和 React 組件一起運行良好。在將 HTML 傳輸到客戶端之前,您可以使用 Next.js 在服務器端渲染 React 組件。

一個廣受歡迎的 Vue.js 框架是 NuxtJS。它使為 Web 構建單頁或全局 Vue.js 程序變得更加容易。NuxtJS 框架旨在具有足夠的通用性,以作為 Web 開發人員的主要項目基礎。借助 NuxtJS,您可以通過在服務器和客戶端之間共享相同的代碼來專注於 Web 應用程序的邏輯。NuxtJS 允許您訪問組件上的許多屬性,例如“isClient”和“isServer”,因此您可以快速確定是在服務器上還是在客戶端上呈現某些內容。這僅僅是 NuxtJS 開發通用 Web 應用程序的廣泛好處列表的開始。

Next.js 比 NuxtJS 好嗎?

沒有優越的結構。這取決於您發現什麼是有效的及其各種品質。

從本質上講,Next.js 是一個 React 框架,可以在用戶需要在具有挑戰性的環境中快速渲染時使用。

另一方面,NuxtJS 是一個 Vue 框架,有助於簡化和加速 Web 開發過程。

NuxtJS 的最佳用例

NuxtJS 的創建是為了解決與創建單頁應用程序 (SPA) 相關的問題,這是許多當代 JavaScript 框架的重點。強制約定優於配置策略是 NuxtJS 最獨特的應用。在使用 NuxtJS 時,您不必創建很多配置文件。相反,您設置文件夾結構,以便 NuxtJS 可以理解它,然後構建應用程序的最終包。

您的應用程序的高度優化包是使用 NuxtJS 創建的。一個示例用例是StoryblokPentest Tools站點。

Next.js 的最佳用例

Next.js 的最佳功能之一是您可以創建靜態頁面,但其功能卻與動態頁面一樣。這在以下情況下是理想的: (a) 內容將定期更改或需要始終保持最新。(b) 例如,多用戶站點需要實時發布能力。(c) 使用 SSG 重建整個網站將花費大量時間(和金錢)並且沒有風險。一個重要的電子商務網站就是一個很好的例子。

Next.js 幫助程序員避免典型問題。Next.js 通過為執行具有挑戰性的 UI 任務提供單一抽象來防止開發人員意外添加問題,例如在組件樹深處過度獲取。如果需要,開發人員確切地了解在哪裡尋求獲取新數據。複雜的底層 API 不需要任何人學習。

一些非常好的案例研究是HuluTypeform網站。

結論

通讀全文後,Next.js 和 NuxtJS 框架的優缺點可能會一目了然。我們無法強調 Javascript 的流行程度以及幾乎所有當前的移動和在線應用程序都是使用它構建的,因此需要使用 Next.js 和 NuxtJS 等框架。因此,必鬚根據自己的需要選擇和使用最有效的框架。我希望這篇文章能幫助您為即將到來的項目在 Next.js 和 NuxtJS 之間做出決定。

鏈接:https ://blog.openreplay.com/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses

#nuxtjs #nextjs #javascript

Nextjs 與 Nuxtjs:你應該使用哪一個?