Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(nuxt): move play online under installation #25978

Merged
merged 3 commits into from Apr 19, 2024
Merged

docs(nuxt): move play online under installation #25978

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4cf3175
docs(readme): move play online under installation
moshetanzer Feb 27, 2024
b10cd85
Merge remote-tracking branch 'origin/main' into patch-1
danielroe Apr 19, 2024
b2a28a1
docs: add play online to intro and refactor installation section slig…
danielroe Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
docs: add play online to intro and refactor installation section slig… 
…htly
  • Loading branch information
@danielroe
danielroe committed Apr 19, 2024
commit b2a28a173ca0b482c06153c06f1667301622f333
4 changes: 4 additions & 0 deletions docs/1.getting-started/1.introduction.md
View file
Open in desktop
Expand Up @@ -10,6 +10,10 @@ We made everything so you can start writing `.vue` files from the beginning whil

Nuxt has no vendor lock-in, allowing you to deploy your application [**everywhere, even on the edge**](/blog/nuxt-on-the-edge).

::tip
If you want to play around with Nuxt in your browser, you can [try it out in one of our online sandboxes](/docs/getting-started/installation#play-online).
::

## Automation and Conventions

Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still customize and override its default behaviors.
Expand Down
26 changes: 15 additions & 11 deletions docs/1.getting-started/2.installation.md
View file
Open in desktop
Expand Up @@ -4,6 +4,17 @@ description: 'Get started with Nuxt quickly with our online starters or start lo
navigation.icon: i-ph-play-duotone
---

## Play Online

If you just want to play around with Nuxt in your browser without setting up a project, you can use one of our online sandboxes:

::card-group
:card{title="Open on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v3" target="_blank"}
:card{title="Open on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v3" target="_blank"}
::

Or follow the steps below to set up a new Nuxt project on your computer.

## New Project

<!-- TODO: need to fix upstream in nuxt/nuxt.com -->
Expand Down Expand Up @@ -40,6 +51,10 @@ bunx nuxi@latest init <project-name>

::

::tip
Alternatively, you can find other starters or themes by opening [nuxt.new](https://nuxt.new) and following the instructions there.
::

Open your project folder in Visual Studio Code:

```bash [Terminal]
Expand Down Expand Up @@ -79,17 +94,6 @@ bun run dev -o
Well done! A browser window should automatically open for <http://localhost:3000>.
::

## Play Online

You can start playing with Nuxt 3 in your browser using our online sandboxes:

::card-group
:card{title="Open on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v3" target="_blank"}
:card{title="Open on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v3" target="_blank"}
::

Start with one of our starters and themes directly by opening [nuxt.new](https://nuxt.new).

## Next Steps

Now that you've created your Nuxt 3 project, you are ready to start building your application.
Expand Down