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

Cleanup multiples pages #383

Open
wants to merge 4 commits into
base: v3
Choose a base branch
from
Open

Cleanup multiples pages #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3625fe5
update vitepress and vue
vallemar Apr 30, 2024
a3c1f65
remove .html of url
vallemar Apr 30, 2024
a3af7f6
fix nav and introduction title
vallemar Apr 30, 2024
e2186c3
clean Vue DevTools
vallemar May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .vitepress/config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default defineConfig({

// todo: remove when content is ready
ignoreDeadLinks: true,

cleanUrls: true,
themeConfig: {
logo: {
dark: "https://art.nativescript-vue.org/NativeScript-Vue-White-Green.svg",
Expand All @@ -18,7 +18,7 @@ export default defineConfig({
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: "Home", link: "/" },
{ text: "Examples", link: "/markdown-examples" },
{ text: "Get Started", link: "/docs/getting-started/installation" },
],

sidebar: [
Expand Down
91 changes: 11 additions & 80 deletions content/docs/getting-started/vue-devtools.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,22 @@
---
contributors: [rigor789, ikoevska]
contributors: [rigor789, cemarta7]
outdated: false
---

# Using Vue DevTools
# Vue DevTools

You can debug NativeScript-Vue applications using the standalone version of Vue DevTools.
To use VueDevtools, run:

To simplify the integration, you can use the [`nativescript-vue-devtools`](https://github.com/nativescript-vue/nativescript-vue-devtools) plugin which takes care of connecting your app to Vue DevTools.

## Step 1: Install dependencies

Run the following command:

```shell
$ cd <project-folder>
$ npm install --save @vue/devtools@^5.3.4 @triniwiz/nativescript-toasty @triniwiz/[email protected] nativescript-vue-devtools
```bash
ns run ios|android --env.vueDevtools
```

<!--
## (Optional) Step 2: Install Vue DevTools globally

To easily access Vue DevTools, you can install the package globally.
This will launch the standalone VueDevtools, and connect to it once the app launches. Right now, devtools are only supported on iOS Simulators and Android Emulators, but physical device support should come soon (requires configuring a host/port that the device can connect to.).

Run the following command:
On android, you must enable cleartext http traffic, otherwise any connections are silently dropped by the system. In the `App_Resources/Android/src/main/AndroidManifext.xml` add the following to your existing `<application>` tag:

```shell
$ npm install -g @vue/devtools
```diff
<application ...
+ android:usesCleartextTraffic="true"
.../>
```

After the installation is complete, you can run the `vue-devtools` command from any directory on your development machine.
-->

## Step 2: Install the `nativescript-vue-devtools` plugin in your app

To connect your application to the Vue DevTools, you need to modify `main.js` (or `main.ts`).

In your code, import `nativescript-vue-devtools` and tell NativeScript-Vue about it using `Vue.use()`.

```JavaScript
import VueDevtools from 'nativescript-vue-devtools'
import Vue from 'nativescript-vue'

Vue.use(VueDevtools)
```
> Make sure you import devtools before Vue, otherwise it might not work as expected.

If you are using a real device instead of an emulator, set the `host` configuration option to point to the IP of your development machine. Otherwise, your device will not be able to connect to your host machine.

```JavaScript
Vue.use(VueDevtools, { host: '192.168.1.42' })
```

## Step 3: Run Vue DevTools

Run the following command in a new terminal to launch Vue DevTools:

```shell
$ npx vue-devtools
```

A window should open. Instructions shown in this window are not required in a NativeScript-Vue application, so please ignore them.

## Step 4: Rebuild and run your app

Run the following commands:

```shell
$ rm -rf platforms
$ tns run android
$ # or
$ tns run ios
```

If your machine and app are configured properly, you should see a few components in the component tree of Vue DevTools.

# Troubleshooting

On Android API level 28 and above, cleartext traffic is disabled by default. In order to connect to Vue DevTools you will have to add
`android:usesCleartextTraffic="true"` to the `App_Resources/Android/src/main/AndroidManifest.xml` file:

```xml
<application
<!-- ... -->
android:usesCleartextTraffic="true"
<!-- ... -->
</application>
```

After making the change, delete the `platforms` folder, and rebuild the app. Vue DevTools should now connect automatically.
2 changes: 2 additions & 0 deletions content/docs/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ title: Introduction
contributors: [rigor789, tjvantoll, charles-salmon]
---

# Introduction

## What is [NativeScript](https://www.nativescript.org/)?

NativeScript is an open source framework for building truly native mobile applications using JavaScript.
Expand Down
Loading