1675360920
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.
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
URL | Function |
---|---|
localhost:8090/_/ | pocketbase admin setup and log |
localhost:8090/api/ | pocketbase api |
localhost:3000/ | nuxt3 dev server |
From there build your nuxt app as normal. Follow the pocketbase docs for more info on how to use pocketbase.
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.
Author: j-wil
Source code: https://github.com/j-wil/pocket-nuxt
License: Unlicense license
1675275900
A simple project which helps you to find activities todo near you!
Your Location
button to fetch your location.Type
of activity you want to do, and the Distance
you are willing to travel for it.Find
and find the acitivites in your neighbourhood!Nuxt 3
for site developmentSemantic UI
as the CSS frameworkGoogle Maps Javascript API
for rendering the mapHTML 5's Geolocation API
to fetch the user's locationGeoapify's Places API
to fetch information about the placesAuthor: EshaanAgg
Source code: https://github.com/EshaanAgg/PlaceFinder
1675196280
Toybox is a collection of components and icons for quickly building playful UIs for the web. Toybox is built with Nuxt, TailwindCSS, and DaisyUI.
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.
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
},
git checkout -b icon_name
)git commit -m 'add icon icon_name'
)git push -u origin icon_name
)<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" />
Toybox componenets are big WIP. Feel free to contribute!
Components · Icons · API
Author: trentbrew
Source code: https://github.com/trentbrew/toybox
1675183800
Nuxt Layer with all you need to start your next Nuxt + Supabase project without having to worry about the auth system.
🚧 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.
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.
npm i -D supauth # yarn add -D supauth
// ~~/nuxt.config.ts
export default defineNuxtConfig({
extends: ['supauth'],
})
*coming from oxecore layer
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).
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
},
})
Any comment, suggestion, report or pull request is absolutely welcome!
Author: imlautaro
Source code: https://github.com/imlautaro/supauth
1675171649
A simple Nuxt 3 module to show info about your battery device.
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>
Key | Type | Default | Description |
---|---|---|---|
showLabel | boolean | false | If you need the remaining time label close to the battery icon |
showPercentage | boolean | false | If you need to show percentage in battery icon (and label) |
dark | boolean | false | Default battery icn border is white, choose dark if you need black |
colored | boolean | true | If you need to show green, yellow and red color in battery icon |
yarn install
or npm install
yarn build
or npm run build
to build onceyarn build --stub
or npm run build --stub
during active developmentyarn dev
or npm run dev
Author: teonji
Source code: https://github.com/teonji/nuxt-battery
1675048560
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
cd foodfire
yarn
yarn dev
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!"
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
firestore
database with realtime updateAuthor: anticopyright-code
Source code: https://github.com/anticopyright-code/foodfire
License: MIT license
1675016520
A new way to generate pdf's in your Nuxt application.
yarn add nuxt-pdfeasy
// OR
npm i nuxt-pdfeasy
// nuxt.config.ts
modules: [
'nuxt-pdfeasy'
]
<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>
Author: betterwrite
Source code: https://github.com/betterwrite/nuxt-pdfeasy
License: MIT license
1674995040
Movies app demo built using Nuxt 3, Vue 3, UnoCSS, Image Module, The Movie Database API and TypeScript.
🍿 Live preview: https://movies.nuxt.space
Check proxy/README
# Enable pnpm
$ corepack enable
# Install dependencies
$ pnpm install
# Start dev server with hot reload at localhost:3000
$ pnpm dev
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.
Author: nuxt
Source code: https://github.com/nuxt/movies
License: Security policy
1674910680
My résumé, built with NuxtJS and Tailwind CSS
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.
This project's visual style was heavily inspired by the Universal Résumé Template.
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.
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.
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.)
# 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
.
One yarn
script in particular - yarn html-lint
- requires some setup before it will run:
bundle install
at the root of this projectyarn 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.
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.
For detailed explanation on how things work, check out Nuxt.js docs.
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.
Icons were sourced from Font Awesome (license). No changes were made to the icons.
Author: williamhatcher
Source code: https://github.com/williamhatcher/williamhatcher
License: MIT license
1674812261
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:
As a prerequisite for this tutorial, you should have basic knowledge of the Vue.js framework.
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.
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.
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.
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
1673884140
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.
The Elk team maintains a deployment at:
main
branch)These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
h4.io
ServerAnd all the companies and individuals sponsoring Elk Team and the members. If you're enjoying the app, consider sponsoring us:
Or you can sponsor our core team members individually:
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.
We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.
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.
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
Elk uses Vitest. You can run the test suite with:
nr test
Author: Elk-zone
Source Code: https://github.com/elk-zone/elk
License: MIT license
1672461120
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:
# 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.
Author: sdras
Source Code: https://github.com/sdras/ecommerce-netlify
1672373512
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
1663119195
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
1662513120
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