Nuxt.js

Single Binary Full Stack Nuxt3 PocketBase Application

Quick Demo

This demo allows you to login and see pocketnuxt in action. This is hosted on a small droplet in DigitalOcean using systemctl.

Pocket Nuxt

Nuxt3 and PocketBase delivered in a simple binary that can run anywhere.

This is achieved by compiling the Nuxt app into a static hosted folder and then using Go to serve the static files and pocketbase api.

//go:embed all:.output/public
var public embed.FS

Make it your own by extending Pocketbase and adding your app to the app folder.

Stack

• PocketBase
• Nuxt3
• PrimeVue
• PrimeIcons

Run Locally

This will run both a Nuxt3 dev server with hot reload and a pocketbase instance with a authentication and an api ready to go.

Clone the project

  git clone https://github.com/j-wil/pocket-nuxt

Go to the project directory

  cd pocket-nuxt

Install dependencies

  yarn install

Start the server

  yarn dev

From there build your nuxt app as normal. Follow the pocketbase docs for more info on how to use pocketbase.

Deployment

This will create a single binary containing Nuxt and PocketBase for deployment.

  yarn build:prod

  ./pocketnuxt serve --http "yourdomain.com:80" --https "yourdomain.com:443"

https://pocketbase.io/docs/going-to-production/ for more examples.

Acknowledgements

• PocketBase

Download details:

Author: j-wil
Source code: https://github.com/j-wil/pocket-nuxt

License: Unlicense license

#vue #nuxt 

A Simple Nuxt 3 App to Find The Nearest Locations Near You

PlaceFinder

A simple project which helps you to find activities todo near you!

How to Use

1. Open the deployed site here and click on the Your Location button to fetch your location.
2. Choose the Type of activity you want to do, and the Distance you are willing to travel for it.
3. Click Find and find the acitivites in your neighbourhood!

Screenshots

Techstack Used

• Nuxt 3 for site development
• Semantic UI as the CSS framework
• Google Maps Javascript API for rendering the map
• HTML 5's Geolocation API to fetch the user's location
• Geoapify's Places API to fetch information about the places

Download details:

Author: EshaanAgg
Source code: https://github.com/EshaanAgg/PlaceFinder

#vue #nuxt 

Toybox: A Tiny Icon API Built with Nuxt

Toybox

About

Toybox is a collection of components and icons for quickly building playful UIs for the web. Toybox is built with Nuxt, TailwindCSS, and DaisyUI.

Icons API

You can use the API to fetch icons. The API is available at toybox.design/api/v1/icons. The API returns the following JSON:

{
  "name": "icon_name",
  "svg": "<svg>...</svg>"
}

To specify icon size, add a size query parameter to the API URL. The default size is 24px.

Contributing

To add a new icon, insert a new object into the icons array in ~/data/icons.js. Fill should be currentColor, and tags are automatically generated from the icon name. However, you can add custom tags if you want.

{
  name: 'icon_name',
  svg: '<svg>...</svg>',
  tags: ['tag1', 'tag2', 'tag3'], // optional
},

1. Fork the project
2. Create your Feature Branch (git checkout -b icon_name)
3. Commit your Changes (git commit -m 'add icon icon_name')
4. Push to the Branch (git push -u origin icon_name)
5. Open a Pull Request

Example Icon Component (Nuxt)

<script setup>
  const props = defineProps({
    name: {
      type: String,
      default: '',
      requred: true,
    },
    size: {
      type: [Number, String],
      default: 24,
    },
  })

  const { svg } = await http.get(
    `http://toybox.design/api/v1/icons/${props.name}?size=${props.size}`
  )
</script>

<template>
  <div v-html="svg"></div>
</template>

Icon color can be controlled with CSS or Tailwind classes:

<Icon name="star" class="text-blue-400" />

Components

Toybox componenets are big WIP. Feel free to contribute!

 Components · Icons · API

Download details:

Author: trentbrew
Source code: https://github.com/trentbrew/toybox

#nuxt 

Login Screens Built with Nuxt and Supabase

Supauth for Nuxt

Nuxt Layer with all you need to start your next Nuxt + Supabase project without having to worry about the auth system.

👉 Check the docs here!

🚧 This layer is still an experiment that will have many changes in the future, but feel free to try it and suggest changes or report problems.

Features

• Sign up with email and password
• Sign in with providers
• Auth middlewares

This layer is based on the oxecore layer which includes the UnoCSS, Nuxt-Icon and VueUse modules by default, although you can expect that in the future it will not have dependencies that alter your project outside of the login screens.

To do

• Add magic-link login
• Internationalization
• Reset password page

Setup

npm i -D supauth # yarn add -D supauth

// ~~/nuxt.config.ts
export default defineNuxtConfig({
    extends: ['supauth'],
})

Modules Preset

• Supabase
• UnoCSS*
• Nuxt Icon*
• VueUse*

*coming from oxecore layer

Usage

To start using this layer, just follow the setup instructions and create a .env file with your Supabase credentials:

// .env
SUPABASE_KEY=
SUPABASE_URL=

Then, you can run your project and go to /login to sign in or /register to create a new user.

Since this layer is using the @nuxtjs/supabase module, you can of course use all the functions and utilities coming from that module (useSupabaseClient, useSupabaseUser, etc).

Options

export default defineAppConfig({
    supauth: {
        confirm: true, // enable if you have email confirmation on
        redirect: '/', // the path you want to redirect your users after login
        providers: ['google', 'github'], // the oauth providers you want to enable
        legalAdvice: {
            privacy: '/privacy-policy',
            terms: '/terms-and-conditions',
        }, // legal links to show below the auth forms. you can set it to false to don't show any legal advice
    },
})

Middlewares

• authenticated (if there isn’t a user logged-in, you’re gonna be redirected to /login)
• unauthenticated (if there is a user logged-in, you’re gonna be redirected to /, or the redirect path in the options of the layer.

Any comment, suggestion, report or pull request is absolutely welcome!

Download details:

Author: imlautaro
Source code: https://github.com/imlautaro/supauth

#vue #nuxt 

A Simple Nuxt 3 Module to Show info About Your Battery Device

Nuxt Battery module

A simple Nuxt 3 module to show info about your battery device.  

• 📖  Read the documentation
• 💥  Try the demo

Features

• Nuxt 3 with composables
• Nuxt 3 component battery-status imported automatically
• TypeScript support

Install

Add nuxt-battery dev dependency to your project:

yarn add nuxt-battery

Then, add nuxt-battery to the modules section of your Nuxt configuration:

export default {
  modules: ['nuxt-battery'],
}

Usage

Learn how to use the nuxt-battery module in your Nuxt 3 application.

This module exposes composables that are auto-imported by Nuxt 3.

useBattery

This composable return info about your battery status.

<script setup lang="ts">
const {
  status, // number - between 0 and 100 (-1 means the plugin still loading)
  charging, // boolean - true/false if it is charging or not
  time, // number - battery time remaining in minutes
  label // string - battery time remaining label 
} = useBattery()
</script>

<nuxt-battery />

If you don't need to develop your own custom component, you can simply use this one to have a status battery.

::code-group

<template>
  <div>
    <nuxt-battery />
  </div>
</template>

<template>
  <div>
    <nuxt-battery
      :show-label
      :show-percentage
      :dark
      :colored
    />
  </div>
</template>

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Build module using yarn build or npm run build to build once

• Use yarn build --stub or npm run build --stub during active development

1. Start development server using yarn dev or npm run dev

Download details:

Author: teonji
Source code: https://github.com/teonji/nuxt-battery

#vue #nuxt 

Static Generated Progressive Food Delivery Web App using NuxtJS

FoodFire - Nuxt2.x + Fireabase + Vue2.x

Static Generated Progressive food delivery web app using NuxtJS + Firebase

Quick start

Make sure you have Node version >= 10.x, NPM >= 6.x Yarn version >= 1.x Clone the repo git clone https://github.com/itswadesh/foodfire.git

navigate inside the directory

cd foodfire

install the dependencies with npm

yarn

serve with hot reload at localhost:3000

yarn dev

How to create a pull request

• Fork the repo
• Do modifications locally
• Create a pull request
• Merge into foodfire

Deploy to Netlify

Getting Started

Press the "New site from Git" button on the Netlify dashboard. Authenticate with your repository host, select a repository to deploy, and continue. You should land on step 3: "Build options, and deploy!"

Configure:

Branch to deploy: master, or which-ever branch you prefer

Build command: npm run generate

Publish directory: dist

Add additional ENV variables via the "Advanced" button

Features

Coding & Deployment

• Using firebase firestore database with realtime update
• Single page progressive ecommerce app using VueJs
• Offline enabled
• Progressive images with lazy loading
• All assets(js,css,images) are precached for a faster user experience
• Modular coding structure
• Auto deploy to Netlify production server
• Better and cleaner JavaScript code
• Simplified installation and configuration
• Reliable: Load fast and provide offline experience
• Fast: Respond quickly to user actions
• Engaging: Feel like a native app on mobile devices
• Integrated google analytics

Store Front

• Checkout using COD
• Customer Address
• Responsive store front
• Dynamic Page Titles
• Firebase authentication system (Login with google)

Download details:

Author: anticopyright-code
Source code: https://github.com/anticopyright-code/foodfire

License: MIT license

#vue #nuxt #firebase 

Nuxt Pdfeasy: A PDF-Generator Module for Nuxt3

Nuxt3 PDFEasy Module

A new way to generate pdf's in your Nuxt application.

• For PDFEasy docs, click here

Setup

yarn add nuxt-pdfeasy
// OR
npm i nuxt-pdfeasy

// nuxt.config.ts
modules: [
  'nuxt-pdfeasy'
]

Example

<template>
  <iframe id="pdf" />
</template>

<script setup>
import { useNuxtApp } from '#app';

const { $pdf } = useNuxtApp()

$pdf.new({
  plugins: [
    {
      page: [
        // simple counter footer
        ({ Text }, context, current, total) => {
          // render in every page
          Text(`${current}/${total}`, { fontSize: 20 }, {
            x: context.width / 2,
            y: context.height - context.margins.bottom
          })
        },
        // simple header
        ({ Text }, context, current, total) => {
          // render in every page
          Text('A Simple Header', {}, {
            x: context.width / 2,
            y: context.margins.top - 20
          })
        }
      ]
    }
  ]
})

$pdf.add([
  { raw: 'Hello NUXT!', text: { fontSize: 22 }},
])

$pdf.run().then(blob => {
  const iframe = document.querySelector('#pdf')

  iframe.src = blob
}).catch((err) => {
  console.error(err)
})
</script>

Download details:

Author: betterwrite
Source code: https://github.com/betterwrite/nuxt-pdfeasy

License: MIT license

#vue #nuxt 

Nuxt Movies: A TMDB Client Built with Nuxt 3

Nuxt Movies

Movies app demo built using Nuxt 3, Vue 3, UnoCSS, Image Module, The Movie Database API and TypeScript.

🍿 Live preview: https://movies.nuxt.space

Screenshots

Proxy Server

Check proxy/README

Setup

# Enable pnpm
$ corepack enable

# Install dependencies
$ pnpm install

# Start dev server with hot reload at localhost:3000
$ pnpm dev

Credits

Based on jasonujmaalvis/vue-movies and tastejs/nuxt-movies.

Data provided by The Movie Database.

This project uses the TMDB API but is not endorsed or certified by TMDB.

Download details:

Author: nuxt
Source code: https://github.com/nuxt/movies

License:  Security policy

#nuxt 

Nathan Friend Resume Built with NuxtJS and Tailwind CSS

Nuxt Résumé

My résumé, built with NuxtJS and Tailwind CSS

Data

All of the content of this résumé is sourced from resume-data.json. This file loosely adheres to the resume.json schema (with some additional properties for display purposes). See the resume.json section below for more info about resume.json compatibility.

Additionally, a resume-data.private.json file can be created alongside resume-data.json. This file is .gitignore-ed; its contents will be merged into resume-data.json when building this résumé. This is used to protect personal info such as phone numbers and addresses, while still allowing this data to appear in locally-generated résumés.

Inspiration

This project's visual style was heavily inspired by the Universal Résumé Template.

resume.json

As part of the CI pipeline, a resume.json file that conforms to the resume.json schema is extracted from resume-data.json and automatically pushed to a GitLab Snippet and a GitHub Gist. The ci/generate-resume.json.js script is responsible for this work.

You can view the rendered result at https://registry.jsonresume.org/nfriend.

Generating a résumé locally

To generate a résumé locally, simply start the dev server (yarn dev) and print the web page (⌘/Ctrl+P) as a PDF. In fact, this is exactly how the PDF is generated by the pipeline. Since the pipeline uses headless Chrome, printing the résumé locally using Chrome will provide the most consistent result.

Why not just use the PDF generated by the pipeline?

The pipeline generates a PDF using only the public information found in resume-data.json and does not include any private data specified in resume-data.private.json. (For example, phone numbers.)

Build Setup

# install dependencies
$ yarn

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

# generate static project
$ yarn generate

For other useful commands, check out the scripts defined in package.json.

HTML linting

One yarn script in particular - yarn html-lint - requires some setup before it will run:

• Install Ruby
• Install Bundler
• Run bundle install at the root of this project
• Run yarn generate to generate a production build in ./dist

Once these prerequisites have been completed, running yarn html-lint will run html-proofer on the output *.html. This is particularly useful for validating that all external links are still valid.

Static generation

During deployment, all Nuxt-related <script> elements are stripped from the compiled HTML. This is accomplished by the yarn strip-scripts command, which calls ci/strip-script-elements.js. This works because this application is fully rendered at build time and requires no client-side hydration.

Stripping these <script> elements allows the end result to be truly static (no JavaScript required), which isn't (yet) supported by Nuxt.

More info

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

License

All résumé content in resume-data.json (or generated by ci/generate-resume.json.js) is Copyright Nathan Friend © 2020 and may not be reused without my permission.

All other directories and files are MIT Licensed. If you make use of any code found in this project, a link back to https://gitlab.com/nfriend/nuxt-resume would be appreciated, but is not required.

Attributions

Icons were sourced from Font Awesome (license). No changes were made to the icons.

Download details:

Author: williamhatcher
Source code: https://github.com/williamhatcher/williamhatcher

License: MIT license

#vue #tailwindcss #nuxt 

Routing Patterns in Nuxt 3

This tutorial will discuss routing patterns in Nuxt 3. Mixing and matching static and dynamic patterns in Nuxt 3. Explore practical examples of cool Nuxt 3 features, like better support for dynamic routes, partial matches on child routes, and more.

Nuxt 3 has had a largely positive reception since its release in October 2021. The release came with cool features, like bracket notations for matching dynamic routes and improvements in server routing and the general workflow.

This post will discuss routing patterns in Nuxt 3. We will cover:

• Mixing and matching static and dynamic text within a route
• Creating partial matches on child routes
• Using multiple dynamic matching

As a prerequisite for this tutorial, you should have basic knowledge of the Vue.js framework.

Mixing and matching static and dynamic text within a route

In Nuxt 3, we can mix and match static and dynamic segments in a route path by using the : character to denote dynamic segments. For example, if we wanted to define a route with a static path of /products and a dynamic segment called id, we could achieve this like so:

{
  path: '/products/:id',
  component: ProductPage
}

In this example, the id segment will be treated as a dynamic segment, which means that it can be any value that we pass to the route. For example, if we navigate to the **/products/123** URL, the id segment will be set to 123.

To access the value of the dynamic segment in our component, we can use the $route object, which is provided by Nuxt.js. For example, if we wanted to access the id segment in the ProductPage component, we could use the $route.params property like this:

export default {
  computed: {
    productId() {
      return this.$route.params.id
    }
  }
}

Then, we can use the productId computed property in our component to access the value of the id segment. Keep in mind that the $route object is reactive, which means that it will update automatically whenever the route changes.

In summary, to mix and match static and dynamic segments in a route path in Nuxt.js v3, we can use the : character to denote dynamic segments. We can then access the values of those segments using the $route object in your component.

We can achieve this in Nuxt 2 using the same strategy, but with a different naming pattern for the dynamic file. For example, in Nuxt 3, a dynamic file is denoted using the [] notation, whereas in Nuxt 2, we would use the _ notation.

Creating partial matches on child routes

In Nuxt 3, you can use dynamic parameters to implement partial matches in child routes.

A dynamic parameter is a path segment that starts with a colon : and matches any value. For example, if you wanted to create a route that matches any user ID, you could define a route like this:

/users/:id

This route will match any URL that starts with /users/ and is followed by any value. For example, this route would match all of the following URLs:

/users/123
/users/abc
/users/user123

To access the value of the dynamic parameter in your route component, you can use the $route.params object. For example, if the URL is /users/123, you can access the value of the id parameter like this:

const id = this.$route.params.id

You can also use dynamic parameters in child routes. For example, if you have a route that displays user details, you might define a child route like this:

/users/:id/details

This route will only be matched if the URL is a child of the /users/:id route. It will inherit the value of the id parameter from the parent route. However, it would not match the URLs below because they do not have a value for the :child parameter:

/parent
/parent/

To make the route match partial URLs, we can use the _ syntax in the path like this:

{
    path: '/parent/_*',
    component: './parent/child.vue'
}

The route above would match the following URLs:

/parent/abc
/parent/xyz
/parent
/parent/

The _ parameter will now match any value after the /parent/ part of the URL, including an empty string.

Using multiple dynamic parameters for route matching

In Nuxt 3, you can use multiple dynamic parameters to implement complex route matching.

For example, if you wanted to create a route that matches a product detail page, you might define a route like this:

/products/:category/:productId

The route above will match any URL that starts with /products/ and is followed by a value for the category parameter, then followed by a value for the productId parameter. For example, this route would match all of the following URLs:

/products/books/123
/products/clothing/abc
/products/electronics/xyz

To access the values of the dynamic parameters in your route component, you can use the $route.params object. For example, if the URL is /products/books/123, you can access the values of the category and productId parameters like this:

const category = this.$route.params.category
const productId = this.$route.params.productId

You can also use dynamic parameters in child routes. For example, if you have a route that displays product reviews, you might define a child route like this:

/products/:category/:productId/reviews

The route above will only be matched if the URL is a child of the /products/:category/:productId route. Additionally, it will inherit the values of the category and productId parameters from the parent route.

You can also define multiple dynamic routes in the nuxt.config.js file. For example, if you have a list of user profiles that you want to make available at the /profile/:id URL, we can define a dynamic route like this:

// nuxt.config.js

export default {
  // ... other Nuxt.js configuration options

  // define the dynamic routes
  generate: {
    routes: [
      '/profile/:id',
      // add additional dynamic routes here as needed
    ]
  }
}

Then, in the pages/users/[id].vue page component, you can access the id parameter using the $route object provided by Nuxt.js. For example:

// pages/products/[id].vue

export default {
  data() {
    return {
      product: null
    }
  },
  async asyncData({ $route }) {
    // fetch the user data using the `id` parameter from the URL
    const product = await fetchProducts($route.params.id)

    return {
      product
    }
  }
}

When the page is rendered, Nuxt.js will automatically generate a static version of the page at the appropriate URL — for example, /users/123 — with the user data already included in the page. This allows us to use dynamic routes while benefiting from the performance advantages of static site generation.

Conclusion

To conclude, let’s go over a quick summary of what we covered in this article.

Nuxt is a framework similar to Next.js for building server-rendered Vue.js applications. It provides a powerful way to create routes for your application using the concepts of pages and layouts. In Nuxt 3, you can use static patterns and dynamic parameters to define routes that match specific URL patterns.

Static patterns are simple string patterns that match a specific URL exactly. For example, you might define a route like /about that matches the /about URL exactly.

On the other hand, dynamic parameters are path segments that start with a colon : and match any value. You can use dynamic parameters to create routes that can match any possible value, making it easier to create routes that can handle dynamic data.

In this post, we went over some of the popular routing advancements in Nuxt 3 with some practical implementation examples, looking forward to the next versions. Let me know what features you’ll be expecting from the Nuxt team, or hone your skills by reading more about developing with Nuxt.

Original article source at https://blog.logrocket.com

#nuxt #vue 

Elk: A Nimble Mastodon Web Client

Elk alpha

A nimble Mastodon web client 

⚠️ Elk is in Alpha

It is already quite usable, but it isn't ready for wide adoption yet. We recommend you use it if you would like to help us build it. We appreciate your feedback and contributions. Check out the Open Issues and jump in the action. Join the Elk discord server to chat with us and learn more about the project.

Official Deployment

The Elk team maintains a deployment at:

• 🦌 Production: elk.zone
• 🐙 Canary: main.elk.zone (deploys on every commit to main branch)

Ecosystem

These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:

• elk.h4.io - Use Elk for the h4.io Server
• elk.universeodon.com - Use Elk for the Universeodon Server

And all the companies and individuals sponsoring Elk Team and the members. If you're enjoying the app, consider sponsoring us:

• Elk Team's GitHub Sponsors

Or you can sponsor our core team members individually:

• Anthony Fu
• Daniel Roe
• 三咲智子 Kevin Deng
• Patak

We would also appreciate sponsoring other contributors to the Elk project. If someone helps you solve an issue or implement a feature you wanted, supporting them would help make this project and OS more sustainable.

📍 Roadmap

Open board on Volta

🧑‍💻 Contributing

We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.

Online

You can use StackBlitz Codeflow to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the Codeflow docs.

Local Setup

Clone the repository and run on the root folder:

pnpm i
pnpm run dev

Warning: you will need corepack enabled, check out the Elk Contributing Guide for a detailed guide on how to set up the project locally.

We recommend installing ni, that will use the right package manager in each of your projects. If ni is installed, you can instead run:

ni
nr dev

Testing

Elk uses Vitest. You can run the test suite with:

nr test

🦄 Stack

• Vite - Next Generation Frontend Tooling
• Nuxt - The Intuitive Web Framework
• Vue - The Progressive JavaScript Framework
• VueUse - Collection of Vue Composition Utilities
• Pinia - The Vue Store that you will enjoy using
• Vue Macros - More macros and syntax sugar for Vue
• UnoCSS - The instant on-demand atomic CSS engine
• Iconify - Iconify icon sets in JSON format
• Masto.js - Mastodon API client in TypeScript
• shiki - A beautiful Syntax Highlighter
• vite-plugin-pwa - Prompt for update and push notifications

Download Details:

Author: Elk-zone
Source Code: https://github.com/elk-zone/elk 
License: MIT license

#vue #typescript #mastodon #client #nuxt #app 

Ecommerce-netlify: Ecommerce Store with Netlify Functions and Stripe

🛍 Ecommerce Store with Netlify Functions and Stripe

A serverless function to process stripe payments with Nuxt, Netlify, and Lambda

Demo site is here: E-Commerce Store

There are two articles explaining how this site is set up:

• Explanation of Netlify Functions and Stripe: Let's Build a JAMstack E-Commerce Store with Netlify Functions
• Explanation of dynamic routing in Nuxt for the individual product pages: Creating Dynamic Routes in Nuxt Application

Build Setup

# install dependencies
$ yarn install or npm run install

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

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

# generate static project
$ yarn generate or npm run generate

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

Download Details:

Author: sdras
Source Code: https://github.com/sdras/ecommerce-netlify 

#serverless #stripe #nuxt 

Building a Complete Project with Nuxt 3

The Nuxt 3 Bootcamp - The Complete Developer Guide. Build complex & engaging Vue apps with Nuxt3. Nuxt3 provides universal rendering, file based router, and other features

This is the first two sections of my complete Nuxt 3 course on Udemy! On YouTube we will learn about file based routing and layouts and on Udemy we will learn about:
- Route Middleware
- OAuth Authentication 
- Error Handling
- Image Processing
- Building a REST API
- Much much more!

Udemy Discount Code (9.99): https://bit.ly/3WAcEqH 
 

GitHub Starter Link:
https://github.com/harblaith7/Nuxt3Starter 

#nuxt #vue 

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

Subscribe: https://www.youtube.com/@Bitfumes/featured 

#nuxt #nuxtjs #vue #vuejs 

How To Connect Laravel 9 API With NuxtJS 3

In this section we will connect Laravel 9 API with Nuxt JS 3. We will fetch Laravel API in Nuxt 3 using useFetch and useAsyncData.

Source: https://larainfo.com

#laravel #nuxt