Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hachi8833/nuxt-tailwind-mongo-starter
https://github.com/hachi8833/nuxt-tailwind-mongo-starter
Last synced: 13 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hachi8833/nuxt-tailwind-mongo-starter
- Owner: hachi8833
- Created: 2022-07-04T10:10:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-08T04:57:33.000Z (over 2 years ago)
- Last Synced: 2024-11-14T03:48:10.970Z (2 months ago)
- Homepage: nuxt-tailwind-mongo-starter.vercel.app
- Size: 310 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nuxt3 + TailwindCSS + MongoDB Example
Deploy your Nuxt3 + TailwindCSS + MongoDB project to Vercel with zero configuration.
[](https://vercel.com/new/clone?repository-url=https://github.com/tanquar/nuxt-tailwind-mongo-starter)
_Live Example: https://nuxt-tailwind-mongo-starter.vercel.app/_
## Prerequisites
Install `n` and `yarn`.
```bash
brew install n
brew install yarn
```
## Setup
Install the dependencies:
```bash
yarn install
```
## Setup MongoDB
Visit [MongoDB Atlas](https://www.mongodb.com/) and create an Atlas database.
Free tier should be sufficient for testing.
Define a connection user and password.
Set environment variables in Vercel:
```
(All)
MONGODB_URL=mongodb+srv://:@.mongodb.net/?retryWrites=true&w=majority
(Production)
MONGODB_DBNAME=nuxt-tailwind-mongo-starter-prod
(Preview)
MONGODB_DBNAME=nuxt-tailwind-mongo-starter-prev
(Development)
MONGODB_DBNAME=nuxt-tailwind-mongo-starter-dev
```
Create a local `.env` file:
```
MONGODB_URL=mongodb+srv://:@.mongodb.net/?retryWrites=true&w=majority
MONGODB_DBNAME=nuxt-tailwind-mongo-starter-dev
```
where `` and `` are the credentials you have just created in Atlas.
You can also create three different clusters and assign different credentials for each environment:
```
(All)
MONGODB_DBNAME=nuxt-tailwind-mongo-starter
(Production)
MONGODB_URL=mongodb+srv://:@.mongodb.net/?retryWrites=true&w=majority
(Preview)
MONGODB_URL=mongodb+srv://:@.mongodb.net/?retryWrites=true&w=majority
(Development)
MONGODB_URL=mongodb+srv://:@.mongodb.net/?retryWrites=true&w=majority
(local `.env` file)
MONGODB_URL=mongodb+srv://:@.mongodb.net/?retryWrites=true&w=majority
MONGODB_DBNAME=nuxt-tailwind-mongo-starter
```
## Allow IP in MongoDB Atlas
If Versel generates an error `Task timed out after 10.01 seconds`,
the Mongo DB Atlas is blocking an IP address of the Versel Server Function.
You need to allow `0.0.0.0` by visiting MongoDB Atlas > Security > Network Access > Add IP Address.
Note that allowing `0.0.0.0` will accept any IP address,
so make sure that the username and password are long and complex enough.
## Development
Start the development server on http://localhost:3000:
```bash
yarn dev
```
## Deploy Your Own
Build the application for production:
```bash
yarn build
```
## Amendments applied to Vercel setup of Nuxt3
Updated made to package.json:
```diff
= "scripts": {
- "dev": "nuxi dev",
+ "dev": "nuxt dev",
- "build": "nuxi build",
+ "build": "nuxt build",
...
= "devDependencies": {
- "nuxt3": "latest",
+ "nuxt": "nuxt3@latest",
```
Updated made to nuxt.config.ts:
```diff
- import { defineNuxtConfig } from 'nuxt3'
+ import { defineNuxtConfig } from 'nuxt'
```
Commands executed:
```bash
% rm -rf node_modules
% rm -rf .nuxt
% rm yarn.lock
% yarn install
```
# Tips for implementation
## `layouts` of Nuxt3
1. Create `default.vue` and custom layouts:
~/layouts/default.vue:
```html
Default layout
Default footer
```
~/layouts/custom-ja.vue:
```html
Custom Ja layout
Custom Ja footer
```
~/layouts/custom-en.vue:
```html
Custom En layout
Custom En footer
```
2. Create `~/pages/index.vue` as the entry point with `default` layout.
~/pages/index.vue:
```html
Welcome!
Choose locale
- ja
- en
```
3. Create `~/pages/ja/ja.vue` that works as a skelton for all child items down this directory.
Define the layout using `definePageMeta()` macro.
~/pages/ja/ja.vue:
```html
definePageMeta({
layout: "custom-ja",
});
```
4. Create `~/pages/ja/index.vue`.
This file, and all the child pages, will inherit the layout defined in `ja.vue`.
~/pages/ja/index.vue:
```html
Top
>
Ja
こんにちは
-
hello
-
content/hello
```
5. Within `~/pages/ja/` directory, create `hello/index.vue` as a child page using the same `custom-ja` layout.
~/pages/ja/hello/index.vue:
```html
Top
>
Ja
>
Hello
Hello! こんにちは!
```
6. Create `en/en.vue` (skelton), `en/index.vue`, and `en/hello/index.vue` in the same way.