توضیحات

nuxt.js (ناکست جی اس) چیست؟ nuxt.js که در حال حاضر بعد از مدت ها انتظار نسخه 3 آن منتشر شده، یک فریمورک جاوااسکریپتی هست که در سمت فرانت از فریمورک vue.js و در سمت بک اند از node.js استفاده کرده تا سایت های با قابلیت ssr (server-side rendering) که باعث افزایش performance و یا سرعت سایت و همچنین بهبود SEO هست را ایجاد کند. nuxt.js (ناکست جی اس) از بخش های زیر استفاده میکند.

JavaScript framework
ناکست برای انتخاب فریمورک جاوا اسکریپتی خود که reactivity و بصورت web components  باشه، vue.js را انتخاب و استفاده میکند.

Webpack and Vite
ناکست برای بخش bundler خود از vite و webpack استفاده میکند که vite بصورت پیش فرض انتخاب شده است.

Latest JavaScript syntax
ناکست برای transpiler با تبدیل کدهای ورژن جدیدتر جاوااسکریپت به ورژن قدیمی تر برای مرورگر های قدیمی از esbuild استفاده میکند.

Server side
ناکست برای بحث ssr (server-side rendering) و API routes از پکیج h3 استفاده میکند.

Routing library
ناکست برای routing در سمت فرانت و جابجای بین صفحات از پکیج vue-router استفاده میکند

پیشنهاد میکنم که اگه قصد دارید پروژه ای را با vue.js پیاده سازی کنید آن را با nuxt.js پیاده سازی کنید و از امکانات خیلی خوب آن استفاده کنید.

برای درک و آشنایی بیشتر با nuxt.js حتما ویدیو معرفی و همچنین قسمت های رایگان دوره را مشاهده کنید.

مباحثی که در این دوره گفته میشود شامل :
آشنایی با nuxt.js

  • آشنایی با nuxt.js
  • ایجاد پروژه nuxt.js
  • rendering mode در next.js

routing

  • پوشه pages
  • navigation در nuxt
  • route های تو در تو (nested)
  • route های داینامیک (dynamic)
  • آشنایی با catch all routes
  • شخصی سازی صفحه ای error

تگ head و layout

  • تگ head در nuxt
  • پوشه ای layouts

component و composable

  • پوشه components
  • پوشه composables

state management

  • useState
  • pinia در nuxt

middleware و plugin

  • پوشه middleware
  • پوشه plugins

public و assets

  • پوشه public و nuxt-image
  • پوشه assets و فایل css و فونت
  • استفاده از sass
  • افزودن فریمورک bootstrap
  • افزودن فریمورک tailwindcss

data fetching و configuration

  • fetch$
  • useAsyncData
  • useFetch
  • configuration

server

  • پوشه server
  • متدهای http
  • middleware و plugin

احراز هویت (Token-Based Authentication)

  • آشنایی با Token-Based Authentication
  • توضیح و اجرای پروژه ای api
  • ایجاد پروژه nuxt و هدر
  • ایجاد صفحه ای register
  • register (عضویت کاربر) بخش اول
  • register (عضویت کاربر) بخش دوم
  • login (ورود کاربر)
  • logout (خروج کاربر)
  • صفحه ای پروفایل
  • بررسی احراز هویت کاربر
  • middleware برای احراز هویت
  • نمایش پست ها

احراز هویت (Cookie-Based Authentication)

  • آشنایی با Cookie-Based Authentication
  • register (عضویت کاربر)
  • login و logout کاربر
  • بررسی احراز هویت کاربر

پیش نیاز این دوره :


javascript جاوا اسکریپت nodejs نود جی اس vuejs ویو جی اس vuex ویو ایکس nuxt.js ناکست جی اس nuxt.js v3 ناکست جی اس ورژن 3

مدرس دوره علی شیخ
مدت دوره 09:18:11
تعداد ویدیو 45

وضعیت دوره : کامل شده
قیمت دوره : 599,000 539,000 تومان
% 10 تخفیف

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • Salam,
    man ye yadgiri awalie az javas. daram wa Karfarma az man mikhad be ejbar ke hatman alan ba Nuxt kar konam wa man video haye Vue shomaro ta nesfe didam be nazaretoon ba in wazeeat man mitunam dore Nuxt shomaro start bezanam?

    • سلام وقت بخیر.
      ببینید پیشنهاد ما اینکه وارد دوره nuxt بشید و پیش نیاز ها که شامل vue هم هست را حداقل یکبار دیده و آشنا باشید چرا که توی این فریمورک کد های vue نوشته میشه

  • سلم استاد
    برای ارسال تصویر به بک اندم از توی postman که اقدام می کنم از طریق form-data کاملا موفق ارسال و پاسخ از سرور دریافت میشه ولی از طریق ناکست که ارسال می کنم خطا می ده.راهنمایی می فرمایید

    
    
    async function onSubmit() {
    try {
    const data = await $fetch("/api/auth/register", {
    method: "POST",
    body: state,
    headers: {
    "Content-Type": "multipart/form-data;",
    },
    });

    if (data.msg === "user is exist") {
    navigateTo("/login");
    }
    if (data.success == false) {
    errorResponse.value = data.Errors;
    }
    if (data.success == true) {
    toast.add({
    title: data.msg,
    icon: "i-heroicons-check-circle",
    description: "This is a notification.",
    });
    console.log(data);

    navigateTo("/");
    }
    } catch (error) {
    console.log(error);
    }
    }

    export default defineEventHandler(async (event) => {
    const body = await readBody(event);
    const runtimeConfig = useRuntimeConfig();

    try {
    const res = await $fetch(
    `${runtimeConfig.public.apiBaseUrl}/api/register`,
    {
    method: "POST",
    body: body,
    headers: {
    "content-type": "multipart/form-data",
    },
    }
    );
    return res;
    } catch (error) {
    return error;
    }
    return body;
    });

    • سلام وقت بخیر.
      شما باید ورودی را تیدیل به form data کنید و بعد ارسال کنید به api که میتونید از پکیج های مانند form-data استفاده کنید و یا چک و تست کنید که h3 تابعی برای این موضوع داره

  • سلام وقت بخیر
    اگر برای پروژه ای سئو نیاز نباشه مثل پنل مدیریت یا وب اپلیکیشنی مثل حسابداری یا انبارداری و... آیا nuxtjs مزیت دیگه ای داره که بخواهیم ازش استفاده کنیم؟
    در مورد nextjs چطور؟

    • سلام وقت بخیر.
      صرفا فقط همین یک موضوع نیست، اگه پروژه api base هست و قراره از vue یا react استفاده بشه بهتر از این دو فریمورک بخاطر قابلیت های که داره استفاده بشه

  • سلام وقت بخیر.
    من یک api با لاراول آماده دارم و فقط سمت فرانت رو دارم با nuxt مینویسم.
    اما اصلا seo صفحات منو شناسایی نمیکنه. هیچ کدوم از تگ ها و متن های صفحه رو گوگل نمیخونه.
    آیا دوره شما میتونه کمک کنه و این موضوع داخل هست؟

    • سلام وقت بخیر.
      والا در خصوص ssr و اینکه صفحه ایجاد و render میشه و برگشت داده میشه صحبت شده و بصورت پیش فرض هم اینجوری هست فریمورک nuxt.js

  • سلام وقت بخیر بنده چطوری متوجه بشم که دوره آپدیت هست و تکنولوژی حال حاضر ناکست رو پشتیبانی میکنه؟البته این سوال رو برای همه دوره ها پرسیدم که لازم نباشه هر سری کامنت بذارم

    • سلام وقت بخیر.
      تمام مواردی که گفته میشه در دوره ها هم در ویدیو معرفی و هم توضیحات و هم سرفصل های دوره کاملا مشخص هست و ورژن استفاده از اون زبان یا فریمورک هم مشخص هست.

  • سلام استاد
    اگه ما فرانت با Nuxt 3 بزنیم
    آیا Nuxt 4 بیاد از nuxt 3 پشتیبانی میکنه یا نه؟

    مثل react که از ورژن های قبلی خودش پشتیبانی میکنه و نیازی نیست از دوباره از صفر پروژه رو بزنیم

    • سلام وقت بخیر.
      ببینید بصورت کلی بستگی داره که چقد تغییرات نسبت به ورژن قبلی داشته باشه اما شما فرضا از ورژن فلان استفاده کردید توی پروژه ای نیاز نیست که حتما ورژن جدید میاد شما هم آپدیت کنید و پروژه داره کارش میکنه
      الان next.js زیاد آپدیت میده اما اینجوری نیست که حتما باید پروژه آپدیت بشه

    • سلام وقت بخیر.
      فریمورک nuxt.js فریمورکی برای vue.js هست هر چند به عنوان بک اند میتوان استفاده کرد ولی فریمورک node.js نیست و nest.js فریمورکش هست که دوره اش توی سایت هست و میتوانید استفاده کنید.

  • سلام اقای شیخ من زمان درخواست به سرور برای رجیستر این ارور دریافت میکنم exception

    
    
    "Symfony\\Component\\HttpKernel\\Exception\\HttpException"
    file
    :
    "C:\\Users\\USER\\Desktop\\exercies_file_nuxtjs_part_31\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Exceptions\\Handler.php"
    line
    :
    396
    message
    :
    "CSRF token mismatch."
    trace
    :
    [{,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…},…]
    سرچ هم کردم گفته بودن مربوط به لاراول هستش

    • سلام وقت بخیر.
      مانند ویدیو اول با پست من چک کنید که مشکل از سمت api هست یا خیر.
      همچنین زیر قسمت مربوطه کامنت کنید و لطف کنید توی کامنت ها، کدها و یا متن های ارور را بین سه عدد بک تیک قرار و ارسال کنید.

    • سلام اقای شیخ مشکل من هنوز حل نشده متن ارور که دریافت میکردم برای شما ارسال کردم اگر ممکن هست راهنمایی کنید که بتونم از پروژه استفاده کنم ممنون

    • سلام وقت بخیر.
      والا عرض شد که مانند ویدیو شما اول با پست من درخواست بزنید ببینید مشکل از api هست یا خیر و اگه مشکلی نباشه پس مشکل از سمت فرانت هست و با سورس کدی که در اختیارتون هست مقایسه کنید.

  • سلام وقت بخیر استاد الان برای یک پروژه فروشگاهی که api سمت سرور آماده دارم و همینطور vue 3 را هم کامل میدانم چه نیازی به nuxt js هست چون همه میگن nuxt بهتره از vue

    • سلام وقت بخیر.
      ویدیو معرفی و چند قسمت ابتدای دوره که رایگان هست را مشاهده کنید تا بهتر با nuxt.js آشنا بشید.

  • سلام استاد
    مرسی بابت دوره خوبتون.
    یه سوال دارم اگر راهنماییم کنید لطف بزرگی کردید.
    توی قسمت 14 من دقیقا کاری که شما میکنید رو انجام میدم.
    const person = useState('person', () => 'yasser')
    و توی یه کامپوننت دیگه هم اینطوری میخوام بگیرم
    const person = useState('person');
    اما مقدارم خالی میاد.روی سیتم یکی دیگه دقیقا همینکارو کردم و کار میکرد.نظری ندارید؟

    • سلام وقت بخیر.
      ممنون از شما، اگه مراحل به درستی پیش برید نباید مشکلی باشه، کلمه person هم تغییر بدید همچنین سورس کد هم تست کنید. بازم مشکلی بود سورس کدتون را توی تلگرام پشتیبانی ارسال کنید تا براتون بررسی بشه

    • سلام وقت بخیر.
      ناکست قابلیت های زیادی به شما میده که بتونید راحتر کار کنید، برای درک بیشتر لطف کنید ویدیو معرفی و قسمت های ابتدای رایگان دوره ناکست را مشاهده کنید.

    • سلام وقت بخیر.
      خیر، فریمورک css نیست و مربوط به جاوااسکریپت هست و میتوان از وردپرس برای ساخت api استفاده کرد و توی ناکست استفاده کرد.

    • سلام وقت بخیر.
      اگه منظورتون deploy هست. توی دوره فروشگاهی nuxt که عضو هم هستید در بخش آخر توضیحات داده شده

    • خیلی ممنون
      دو تا سوال دارم:
      ۱- میشه تو پوشه سرور middleware هایی که میسازیم رو فقط روی یه یک سری از api های داخلی خاص اعمال کنیم نه رو همه؟
      ۲- چجوری میشه به صفحه ۴۰۴ ریدایرکت کرد؟ من از createError استفاده میکنم ولی فقط تو کنسول ارور میده ولی منتقل نمیشه به ۴۰۴

    • شما توی میدلور از داخل پارامتر event که بهش پاس داده شده میتوانید url را بدست بیارید به این شکل event.node.req.url و شرط قرار بدید که اگه url فلان بود، فلان کار را بکنه
      مورد بعدی هم اینکه شما توی سرور هستید پس ما اونجا جواب را بصورت json برمیگردانیم و سمت فرانت باید چک کنه که اگه status code با مقدار 404 براش آمد فلان صفحه یا کار را انجام بده
      حتما بخش مورد نظر توی داکیومنت را مطالعه کنید و ممنون میشم توی قسمت مربوطه کامنت قرار بدید که دیگر دوستان بتوانند استفاده کنند.

  • سلام و خسته نباشید خدمت استاد عزیز، بازم یه دوره فوق العاده با همون کیفیت و قدر بیان عالی، به همه دوستانی ک نیاز به یادگیری ناکست دارن، توصیه میکنم دوره های استاد رو ببین، ک عالیه اموزش هاشون- من ک با اموزش های اقای شیخ انرژی میگیرم برای ادامه دادن یادگیری هام

    • سلام وقت بخیر‌
      ممنون از شما و حمایتتون?
      خداروشکر دوره براتون مفید بوده

  • سلام
    composer install میزنم اینو میاره :

    Your lock file does not contain a compatible set of packages. Please run composer update.
    
    Problem 1
    - nette/schema is locked to version v1.2.2 and an update of this package was not requested.
    - nette/schema v1.2.2 requires php >=7.1 <8.2 -> your php version (8.2.0) does not satisfy that requirement.
    Problem 2
    - nette/utils is locked to version v3.2.7 and an update of this package was not requested.
    - nette/utils v3.2.7 requires php >=7.2 <8.2 -> your php version (8.2.0) does not satisfy that requirement.
    Problem 3
    - phpspec/prophecy is locked to version v1.15.0 and an update of this package was not requested.
    - phpspec/prophecy v1.15.0 requires php ^7.2 || ~8.0, <8.2 -> your php version (8.2.0) does not satisfy that requirement.
    Problem 4
    - nette/schema v1.2.2 requires php >=7.1 <8.2 -> your php version (8.2.0) does not satisfy that requirement.
    - league/config v1.1.1 requires nette/schema ^1.2 -> satisfiable by nette/schema[v1.2.2].
    - league/config is locked to version v1.1.1 and an update of this package was not requested.

    بعدش composer update میزنم : اینو میده دوباره
    curl error 7 while downloading https://repo.packagist.org/packages.json: Failed to connect to 127.0.0.1 port 51365
    after 2029 ms: Connection refused

    • سلام وقت بخیر.
      لطف کنید XAMPP را پاک کنید و از داخل سایتش در بخش Download از هدر سایت، ورژن 8.1.12 را نصب و دوباره پروژه api را اکسترکت و دستور و مراحل را انحجام بدید.
      لطف کنید توی کامنت ها، کدها و یا متن های ارور را بین سه عدد بک تیک قرار و ارسال کنید و همچنین سوالات را زیر قسمت مربوطه بپرسید.

    • سلام وقت بخیر.
      دقت کنید که این موضوع مربوط به css و توی دوره های اون هست. ناکست فریمورک js هست.

    • متوجه ام که مال css هستش، سوالم درواقع این بود که تو دوره ساخت وبسایت فروشگاهی با Nuxt اون وبسایت responsive هستش یا نه ؟

    • بله، ببینید پروژه تمام دوره ها یک پروژه ای آموزشی هست نه تجاری و اینجوری نیست که سورس کد پروژه را وردارید و همونو روی هاستی بیارید بالا، بلکه کلی موارد توش آموزش داده میشه که فرضا یکسری توی یک پروژه نیازه توی یکیه دیگه نیاز نیست.

    • نه برای استفاده از سورس نبود، صرفا میخواستم ریسپانسیو کردن وبسایت توی Nuxt رو ببینم :)
      مرسی بازم.

  • سلام
    من نياز دارم به سرعت ناكست رو يادبگيرم
    ميتونم بدون ديدن دوره node و كلاً مبحث node اين دوره رو شروع كنم؟
    چون نميخوام وقتي براي node بگذارم

    • سلام وقت بخیر.
      ببینید یه دوره ای ۳ ساعته بیشتر نیست و واقعیتش نمیدونم چرا اکثر دوستان مقاومت دارند برای دیدن پیش نیاز ها، توی ویدیو معرفی دوره گفته شده و اینجا هم گفته میشه که برای درک بهتر بخش بک اندی nuxt نیازه که با node آشنایی داشته باشید. حالا تصمیم با شما که دوره ای رایگان node داخل سایت را مشاهده کنید یا نکنید. برای درک بهتر هست و شما میتوانید نبینید و دوره را شروع کنید.