Replace fake data with real one
Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>
This commit is contained in:
Al Asad Nur Riyad
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@@ -8,5 +8,5 @@
|
|||||||
"**/.svn/**",
|
"**/.svn/**",
|
||||||
"**/.nuxt/**"
|
"**/.nuxt/**"
|
||||||
],
|
],
|
||||||
"cSpell.words": ["Nuxt", "Tailwindcss"]
|
"cSpell.words": ["cloudinary", "Namecheap", "Nuxt", "Tailwindcss"]
|
||||||
}
|
}
|
||||||
|
|||||||
45
content/blogs/1. connect-namecheap-to-vercel.md
Normal file
45
content/blogs/1. connect-namecheap-to-vercel.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
---
|
||||||
|
title: How To Connect You Namecheap Domain With Vercel Deployed App
|
||||||
|
date: 1st Mar 2023
|
||||||
|
description: Here you will lean how to connect your namecheap domain to vercel deployed app.
|
||||||
|
image: /nuxt-blog/pexels-photo-1779487_fnvw1l.jpg
|
||||||
|
alt: How To Connect You Namecheap Domain With Vercel Deployed App
|
||||||
|
ogImage: https://res.cloudinary.com/dmecmyphj/image/upload/v1673369821/cld-sample-3.jpg
|
||||||
|
provider: cloudinary
|
||||||
|
tags: ['namecheap', 'vercel']
|
||||||
|
published: true
|
||||||
|
---
|
||||||
|
|
||||||
|
### Introduction
|
||||||
|
|
||||||
|
If you've purchased a domain from Namecheap and you want to connect it to your Vercel app, there are a few steps you need to follow. In this blog, we'll guide you through the process of connecting your Namecheap domain with your Vercel app.
|
||||||
|
|
||||||
|
### Step 1: Add a custom domain to your Vercel app
|
||||||
|
|
||||||
|
The first step is to add your custom domain to your Vercel app. To do this, log in to your Vercel account and go to your app dashboard. Click on "Settings" and then "Domains". Click on "Add Domain" and enter your custom domain name. Then click on "Add".
|
||||||
|
|
||||||
|
### Step 2: Get the DNS records from Vercel
|
||||||
|
|
||||||
|
Once you've added your custom domain to your Vercel app, you'll need to get the DNS records from Vercel. To do this, go back to the "Domains" section and click on the custom domain you just added. Then click on "DNS Records".
|
||||||
|
|
||||||
|
You'll see a list of DNS records that you need to add to your Namecheap account. These include the A record, the CNAME record, and the TXT record.
|
||||||
|
|
||||||
|
### Step 3: Add DNS records to Namecheap
|
||||||
|
|
||||||
|
Now that you have the DNS records from Vercel, you need to add them to your Namecheap account. To do this, log in to your Namecheap account and go to your domain dashboard. Click on "Advanced DNS" and then "Add New Record".
|
||||||
|
|
||||||
|
Add the A record first. In the "Type" dropdown menu, select "A (Address)". In the "Host" field, enter "@" (without the quotes). In the "Value" field, enter the IP address from the Vercel DNS records.
|
||||||
|
|
||||||
|
Next, add the CNAME record. In the "Type" dropdown menu, select "CNAME (Alias)". In the "Host" field, enter "www" (without the quotes). In the "Value" field, enter the value from the Vercel DNS records.
|
||||||
|
|
||||||
|
Finally, add the TXT record. In the "Type" dropdown menu, select "TXT (Text)". In the "Host" field, enter "@" (without the quotes). In the "Value" field, enter the value from the Vercel DNS records.
|
||||||
|
|
||||||
|
### Step 4: Verify DNS records
|
||||||
|
|
||||||
|
Once you've added the DNS records to your Namecheap account, you need to verify that they're correct. To do this, go back to your Vercel app dashboard and click on the custom domain. Then click on "Verify DNS Configuration". Vercel will check if the DNS records have been set up correctly.
|
||||||
|
|
||||||
|
It may take some time for the DNS records to propagate, so be patient. Once the DNS records have propagated, Vercel will verify them and your custom domain will be connected to your Vercel app.
|
||||||
|
|
||||||
|
### Conclusion
|
||||||
|
|
||||||
|
Connecting your Namecheap domain to your Vercel app is a relatively simple process. By following the steps outlined in this blog, you'll be able to connect your custom domain in no time. Remember to be patient as it may take some time for the DNS records to propagate. If you run into any issues, don't hesitate to reach out to Vercel support for assistance.
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
---
|
|
||||||
title: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
date: 1st Jan 2023
|
|
||||||
description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas
|
|
||||||
image: /nuxt-blog/pexels-photo-1779487_fnvw1l.jpg
|
|
||||||
alt: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
ogImage: https://res.cloudinary.com/dmecmyphj/image/upload/v1673369821/cld-sample-3.jpg
|
|
||||||
provider: cloudinary
|
|
||||||
tags: ['nuxt', 'javascript', 'vue', 'typescript']
|
|
||||||
published: true
|
|
||||||
---
|
|
||||||
|
|
||||||
## Details
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
useHead({
|
|
||||||
title: 'Home',
|
|
||||||
meta: [
|
|
||||||
{
|
|
||||||
name: 'description',
|
|
||||||
content: 'Home',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
titleTemplate: "Riyad's Blog - %s",
|
|
||||||
})
|
|
||||||
|
|
||||||
// Get Last 6 Publish Post from the content/blog directory
|
|
||||||
const { data } = await useAsyncData('home', () =>
|
|
||||||
queryContent('/blogs').limit(6).sort({ _id: -1 }).find()
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
## Desldkf
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
@@ -6,19 +6,19 @@ image: /nuxt-blog/pexels-photo-157040_gwfamn.jpg
|
|||||||
alt: Hwo to fix tailwind intellisense in nuxt3 project
|
alt: Hwo to fix tailwind intellisense in nuxt3 project
|
||||||
ogImage: /nuxt-blog/pexels-photo-157040_gwfamn.jpg
|
ogImage: /nuxt-blog/pexels-photo-157040_gwfamn.jpg
|
||||||
provider: cloudinary
|
provider: cloudinary
|
||||||
tags: ['nuxt', 'vue', 'tailwind']
|
tags: ['nuxt', 'tailwindcss']
|
||||||
published: true
|
published: true
|
||||||
---
|
---
|
||||||
|
|
||||||
## Problems
|
### Problems
|
||||||
|
|
||||||
I had a Nuxt3 and TailwindCSS project. which was opened in VsCode. But the problem was, in my project the tailwind intellisense didn't working properly. I tried to reinstall the vscode tailwind extension but the problem didn't solve properly. Later after doing some research I found a [workaround](https://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#issuecomment-1316788128), That I am sharing here today.
|
I had a Nuxt3 and TailwindCSS project. which was opened in VsCode. But the problem was, in my project the tailwind intellisense didn't working properly. I tried to reinstall the vscode tailwind extension but the problem didn't solve properly. Later after doing some research I found a [workaround](https://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#issuecomment-1316788128), That I am sharing here today.
|
||||||
|
|
||||||
## Why It's Not working
|
### Why It's Not working
|
||||||
|
|
||||||
In our nuxt project we have a `.nuxt` directory. Nuxt uses the `.nuxt/` directory in development to generate your Vue application. And if we try to look properly there is also a file called `.nuxt/tailwind.config.cjs`, So tailwind find to config file in the same project, one is in your root directory and another one is in you `.nuxt` directory.
|
In our nuxt project we have a `.nuxt` directory. Nuxt uses the `.nuxt/` directory in development to generate your Vue application. And if we try to look properly there is also a file called `.nuxt/tailwind.config.cjs`, So tailwind find to config file in the same project, one is in your root directory and another one is in you `.nuxt` directory.
|
||||||
|
|
||||||
## Possible Workaround
|
### Possible Workaround
|
||||||
|
|
||||||
One possible solution is, In your project we call tell the extension to exclude the `.nuxt` directory. To exclude the `.nuxt` directory in your workspace,
|
One possible solution is, In your project we call tell the extension to exclude the `.nuxt` directory. To exclude the `.nuxt` directory in your workspace,
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
title: How To Create Namespace Subdomain & Connect To Vercel App
|
||||||
|
date: 1st Mar 2023
|
||||||
|
description: Here we will learn, How To Create Namespace Subdomain & Connect To Vercel App
|
||||||
|
image: /nuxt-blog/pexels-photo-4523062_zeiadq.jpg
|
||||||
|
alt: How To Create Namespace Subdomain & Connect To Vercel App
|
||||||
|
ogImage: /nuxt-blog/pexels-photo-4523062_zeiadq.jpg
|
||||||
|
provider: cloudinary
|
||||||
|
tags: ['nuxt', 'vercel', 'namecheap']
|
||||||
|
published: true
|
||||||
|
---
|
||||||
|
|
||||||
|
### Introduction
|
||||||
|
|
||||||
|
Creating a subdomain on Namecheap and connecting it with a Vercel deployed app is a straightforward process. In this blog, we will guide you through the steps required to create a subdomain on Namecheap and connect it to your Vercel deployed app.
|
||||||
|
|
||||||
|
### Step 1: Create a subdomain on Namecheap
|
||||||
|
|
||||||
|
The first step is to create a subdomain on Namecheap. To do this, log in to your Namecheap account and go to your domain dashboard. Click on the "Advanced DNS" tab and then click on "Add New Record".
|
||||||
|
|
||||||
|
Select "CNAME (Alias)" from the "Type" dropdown menu. In the "Host" field, enter the name of your subdomain (for example, "app" if you want your subdomain to be "app.yourdomain.com"). In the "Value" field, enter the URL of your Vercel deployed app (for example, "yourapp.vercel.app").
|
||||||
|
|
||||||
|
### Step 2: Verify the subdomain
|
||||||
|
|
||||||
|
After creating the subdomain, you need to verify that it has been set up correctly. To do this, go to your Vercel deployed app dashboard and click on the "Domains" tab. Click on "Add Domain" and enter the name of your subdomain. Vercel will verify the subdomain and confirm that it has been set up correctly.
|
||||||
|
|
||||||
|
### Step 3: Add the subdomain to your Vercel deployed app
|
||||||
|
|
||||||
|
Now that your subdomain has been verified, you need to add it to your Vercel deployed app. To do this, go to your app dashboard and click on "Settings". Click on "Domains" and then click on "Add Domain". Enter the name of your subdomain and click on "Add".
|
||||||
|
|
||||||
|
### Step 4: Verify the subdomain in Vercel
|
||||||
|
|
||||||
|
After adding the subdomain to your Vercel deployed app, you need to verify that it has been set up correctly. To do this, click on the subdomain in your Vercel deployed app dashboard. Click on "Verify DNS Configuration". Vercel will check that the subdomain has been set up correctly and confirm that it is connected to your Vercel deployed app.
|
||||||
|
|
||||||
|
### Conclusion
|
||||||
|
|
||||||
|
Connecting a subdomain on Namecheap to your Vercel deployed app is a simple process that can be done in a few steps. By following the steps outlined in this blog, you can easily create a subdomain on Namecheap and connect it to your Vercel deployed app. Remember to verify your subdomain in both Namecheap and Vercel to ensure that it has been set up correctly. If you encounter any issues, reach out to Vercel support for assistance.
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
---
|
|
||||||
title: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
date: 1st Jan 2023
|
|
||||||
description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat,
|
|
||||||
image: /nuxt-blog/pexels-photo-4523062_zeiadq.jpg
|
|
||||||
alt: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
ogImage: /nuxt-blog/pexels-photo-4523062_zeiadq.jpg
|
|
||||||
provider: cloudinary
|
|
||||||
tags: ['nuxt', 'javascript', 'typescript']
|
|
||||||
published: true
|
|
||||||
---
|
|
||||||
|
|
||||||
## Details
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
## Desldkf
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
78
content/blogs/4. fetch-content-data-render-pages.md
Normal file
78
content/blogs/4. fetch-content-data-render-pages.md
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
---
|
||||||
|
title: How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages
|
||||||
|
date: 1st Mar 2023
|
||||||
|
description: Here we will learn How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages
|
||||||
|
image: /nuxt-blog/pexels-photo-1036936_osvoac.jpg
|
||||||
|
alt: How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages
|
||||||
|
ogImage: /nuxt-blog/pexels-photo-1036936_osvoac.jpg
|
||||||
|
provider: cloudinary
|
||||||
|
tags: ['nuxt', 'nuxt-content']
|
||||||
|
published: true
|
||||||
|
---
|
||||||
|
|
||||||
|
### Introduction
|
||||||
|
|
||||||
|
Nuxt.js is a popular open-source framework for building Vue.js applications. With the release of Nuxt 3, developers have access to new features and improvements to streamline the development process. One of these features is Nuxt Content v2, which allows you to create and manage content in a simple and efficient way. In this blog post, we will guide you through the steps to connect Nuxt Content v2 with Nuxt 3.
|
||||||
|
|
||||||
|
### Step 1: Install the necessary dependencies
|
||||||
|
|
||||||
|
The first step is to install the necessary dependencies for Nuxt Content v2. To do this, run the following command:
|
||||||
|
|
||||||
|
```js
|
||||||
|
npm install @nuxt/content@next
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2: Configure Nuxt Content v2
|
||||||
|
|
||||||
|
Once the dependencies are installed, you need to configure Nuxt Content v2 in your Nuxt 3 project. To do this, create a new file named nuxt.config.js in the root directory of your project and add the following code:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
// Enable Nuxt Content module
|
||||||
|
modules: [
|
||||||
|
'@nuxt/content'
|
||||||
|
],
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
In the above code, we have enabled the Nuxt Content module and set the directory where your content will be stored.
|
||||||
|
|
||||||
|
### Step 3: Create content files
|
||||||
|
|
||||||
|
Once Nuxt Content v2 is configured, you can create content files in the specified directory. By default, Nuxt Content v2 supports Markdown and YAML file formats. You can create a new file in the `content` directory with the following structure:
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
title: 'Hello, world!'
|
||||||
|
---
|
||||||
|
|
||||||
|
# Welcome to Nuxt Content v2
|
||||||
|
|
||||||
|
This is an example of a Markdown file created using Nuxt Content v2.
|
||||||
|
```
|
||||||
|
|
||||||
|
In the above code, we have created a Markdown file with a title and a sample content.
|
||||||
|
|
||||||
|
### Step 4: Display content on a page
|
||||||
|
|
||||||
|
Now that we have created content files, we can display the content on a page. To do this, create a new Vue component in the components directory with the following code:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup lang="ts">
|
||||||
|
const { path } = useRoute()
|
||||||
|
const articles = await queryContent(path).findOne()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
<ContentRenderer :value="articles">
|
||||||
|
<template #empty>
|
||||||
|
<p>No content found.</p>
|
||||||
|
</template>
|
||||||
|
</ContentRenderer>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
---
|
|
||||||
title: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
date: 1st Jan 2023
|
|
||||||
description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat,
|
|
||||||
image: /nuxt-blog/pexels-photo-1036936_osvoac.jpg
|
|
||||||
alt: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
ogImage: /nuxt-blog/pexels-photo-1036936_osvoac.jpg
|
|
||||||
provider: cloudinary
|
|
||||||
tags: ['nuxt', 'javascript', 'vue']
|
|
||||||
published: true
|
|
||||||
---
|
|
||||||
|
|
||||||
## Details
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
## Desldkf
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
---
|
|
||||||
title: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
date: 1st Jan 2023
|
|
||||||
description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat,
|
|
||||||
image: /nuxt-blog/pexels-photo-3379934_qjpfp3.jpg
|
|
||||||
alt: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
|
|
||||||
ogImage: /nuxt-blog/pexels-photo-3379934_qjpfp3.jpg
|
|
||||||
provider: cloudinary
|
|
||||||
tags: ['nuxt', 'typescript']
|
|
||||||
published: true
|
|
||||||
---
|
|
||||||
|
|
||||||
## Details
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
## Desldkf
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
|
|
||||||
44
content/blogs/5. vue3-awesome-library.md
Normal file
44
content/blogs/5. vue3-awesome-library.md
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
---
|
||||||
|
title: Some Awesome Libraries For Vue3
|
||||||
|
date: 1st Jan 2023
|
||||||
|
description: Vue.js is a popular JavaScript framework for building web applications. In this blog post, we will introduce you to some of the awesome libraries for Vue.js in different categories.
|
||||||
|
image: /nuxt-blog/pexels-photo-3379934_qjpfp3.jpg
|
||||||
|
alt: Some Awesome Libraries For Vue3
|
||||||
|
ogImage: /nuxt-blog/pexels-photo-3379934_qjpfp3.jpg
|
||||||
|
provider: cloudinary
|
||||||
|
tags: ['vue']
|
||||||
|
published: true
|
||||||
|
---
|
||||||
|
|
||||||
|
### Introduction
|
||||||
|
|
||||||
|
Vue.js is a popular JavaScript framework for building web applications. It offers a lot of flexibility and ease of use, making it a go-to choice for many developers. One of the advantages of Vue.js is its rich library ecosystem. In this blog post, we will introduce you to some of the awesome libraries for Vue.js in different categories.
|
||||||
|
|
||||||
|
### Essential
|
||||||
|
|
||||||
|
Some libraries are must have when you are start working with new project, here are my list
|
||||||
|
|
||||||
|
- **Vue Router**: Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze
|
||||||
|
- **Pinia**: Pinia started as an experiment to redesign what a Store for Vue could look like with the Composition API around November 2019.
|
||||||
|
- **VueUse**: VueUse is a collection of utility functions based on Composition API. We assume you are already familiar with the basic ideas of Composition API before you continue.
|
||||||
|
- **Vitest**: Vitest is a blazing fast unit test framework powered by Vite.
|
||||||
|
- **Vue Macro**: Vue Macros is a library that implements proposals or ideas that have not been officially implemented by Vue. That means it will explore and extend more features and syntax sugar to Vue.
|
||||||
|
|
||||||
|
### UI Libraries
|
||||||
|
|
||||||
|
UI libraries provide pre-built components and styles for building user interfaces. Here are some popular UI libraries for Vue.js:
|
||||||
|
|
||||||
|
- **Naive UI**: A Vue 3 Component Library Fairly Complete, Theme Customizable, Uses TypeScript, Fast Kinda Interesting
|
||||||
|
- **Vuetify**: Vue Component Framework Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components.
|
||||||
|
- **Vuestic**: You can create a new project or integrate Vuestic UI into an existing application. There are three ways to create new Vuestic App. All of them mostly the same and provides the same features.
|
||||||
|
|
||||||
|
### Others
|
||||||
|
|
||||||
|
- **VueFire**: VueFire Official Firebase bindings for Vue.js
|
||||||
|
- **Vue I118**: Vue I18n Internationalization plugin for Vue.js
|
||||||
|
- **Vue Auto Animate**: Add motion to your apps with a single line of code.
|
||||||
|
- **Vuelidate**: Vuelidate is considered model-based because the validation rules are defined next to your data, and the validation tree structure matches the data model structure.
|
||||||
|
|
||||||
|
### Conclusion
|
||||||
|
|
||||||
|
In this blog post, we have introduced you to some of the awesome libraries for Vue.js in different categories. These libraries can help you build better and more engaging web applications with Vue.js. Remember to choose the right library based on your project requirements and always refer to the documentation for usage and integration instructions. If you encounter any issues, reach out to the Vue.js community for assistance.
|
||||||
@@ -14,6 +14,8 @@ const topics = [
|
|||||||
'firebase',
|
'firebase',
|
||||||
'supabse',
|
'supabse',
|
||||||
'cypress',
|
'cypress',
|
||||||
|
'vercel',
|
||||||
|
'namecheap',
|
||||||
]
|
]
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
|
|||||||
Reference in New Issue
Block a user