https://github.com/GitHub30/vscode-remote-try-nuxt

Nuxt.js sample project for trying out the VS Code Remote - Containers extension
https://github.com/GitHub30/vscode-remote-try-nuxt

docker nuxt vscode vscode-remote vue

Last synced: 3 months ago
JSON representation

Nuxt.js sample project for trying out the VS Code Remote - Containers extension

• Host: GitHub
• URL: https://github.com/GitHub30/vscode-remote-try-nuxt
• Owner: GitHub30
• License: mit
• Created: 2019-05-08T15:50:03.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-08T18:47:05.000Z (over 5 years ago)
• Last Synced: 2024-05-28T06:57:42.039Z (6 months ago)
• Topics: docker, nuxt, vscode, vscode-remote, vue
• Language: Dockerfile
• Homepage: https://aka.ms/vscode-remote/containers/getting-started
• Size: 10.7 KB
• Stars: 7
• Watchers: 2
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Try Out Development Containers: Nuxt.js

This is a sample project that lets you try out the **[VS Code Remote - Containers](https://aka.ms/vscode-remote/containers)** extension in a few easy steps.

> **Note:** If you're following the quick start, you can jump to the [Things to try](#things-to-try) section. 

## Setting up the development container

Follow these steps to open this sample in a container:

1. If this is your first time using a development container, please follow the [getting started steps](https://aka.ms/vscode-remote/containers/getting-started).

2. If you're not yet in a development container:

   - Clone this repository.

   - Press F1 and select the **Remote-Containers: Open Folder in Container...** command.

   - Select the cloned copy of this folder, wait for the container to start, and try things out!

## Things to try

One you have this sample opened in a container, you'll be able to work with it like you would locally.

Some things to try:

1. **Terminal:** Press Ctrl+Shift+\^ and type `yarn create nuxt-app .` and answering questions from the terminal window.

2. **Edit:**

   - Open `pages/index.vue`

   - Try adding some code and check out the language features. To format code press Ctrl+Shift+I . It is also possible to go to definition of a custom element by clicking one. Notice that `vscode-eslint`, `vue-peek` and the `vetur` extension are already installed in the container.

3. **Run:**

   - Type `yarn run dev` from the terminal window.

   - Then open a local browser and go to `http://localhost:3000` and note you can connect to the Nuxt App in the container.

4. **Debug with Breakpoints:**

   - Open `Chrome DevTools` Sources tab with Ctrl+Shift+I in Chrome.

   - Add a breakpoint in `webpack:///pages/index.vue` (e.g. on line 29).

   - Press F5 to reload the page.

   - Once the breakpoint is hit, try hovering over variables, examining locals, and more.

   - Notice: Debug on VSCode is a bug. 

microsoft/vscode-chrome-debug#832

## Contributing

This project welcomes contributions and suggestions.

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).

For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or

contact [[email protected]](mailto:[email protected]) with any additional questions or comments.

## License

Licensed under the MIT License. See LICENSE in the project root for license information.