Skip to content

Commit 216ebd8

Browse files
rigor789rigor789
committed
feat: add stackblitz-template
1 parent a75a402 commit 216ebd8

File tree

12 files changed

+216
-7
lines changed

12 files changed

+216
-7
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ NativeScript-Vue with Vue3 support now in beta!
1919

2020
## Quick start
2121

22-
To get started, you can use the [StackBlitz Template](https://stackblitz.com/fork/nativescript-vue3-beta)
22+
<!-- To get started, you can use the [StackBlitz Template](https://stackblitz.com/fork/nativescript-vue3-beta) -->
23+
24+
To get started, you can use the [StackBlitz Template](https://stackblitz.com/fork/github/nativescript-vue/nativescript-vue/tree/main/packages/stackblitz-template?file=app/components/Home.vue?title=NativeScript&20Starter&20Vue3&20Beta)
2325

2426
...or locally:
2527

‎packages/stackblitz-template/.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# NativeScript
2+
hooks/
3+
node_modules/
4+
platforms/
5+
6+
# Logs
7+
logs
8+
*.log
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
13+
# General
14+
.DS_Store
15+
.AppleDouble
16+
.LSOverride
17+
.idea
18+
.cloud
19+
.project
20+
tmp/
21+
typings/
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json

‎packages/stackblitz-template/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@nativescript-vue/stackblitz-template",
3+
"main": "src/app.ts",
4+
"version": "1.0.0",
5+
"dependencies": {
6+
"@nativescript/core": "~8.5.0",
7+
"nativescript-vue": "3.0.0-beta.6"
8+
},
9+
"devDependencies": {
10+
"@nativescript/preview-cli": "1.0.2",
11+
"@nativescript/stackblitz": "0.0.6",
12+
"@nativescript/tailwind": "^2.0.1",
13+
"@nativescript/types": "~8.4.0",
14+
"@nativescript/webpack": "~5.0.0",
15+
"@types/node": "~17.0.21",
16+
"tailwindcss": "^3.1.8",
17+
"typescript": "~4.8.4",
18+
"vue": "^3.2.45"
19+
},
20+
"stackblitz": {
21+
"installDependencies": true,
22+
"compileTrigger": "save",
23+
"startCommand": "setup-nativescript-stackblitz && ns preview"
24+
}
25+
}

‎packages/stackblitz-template/src/app.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
ActionBar {
6+
background-color: #65adf1;
7+
color: white;
8+
}

‎packages/stackblitz-template/src/app.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'nativescript-vue';
2+
import Home from './components/Home.vue';
3+
4+
createApp(Home).start();

‎packages/stackblitz-template/src/components/Details.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts" setup>
2+
import { ref, $navigateBack } from "nativescript-vue";
3+
4+
const items = ref(
5+
Array(1000)
6+
.fill(0)
7+
.map((_, index) => `Item ${index + 1}`)
8+
);
9+
</script>
10+
11+
<template>
12+
<Page actionBarHidden="true">
13+
<GridLayout rows="auto, *">
14+
<Label
15+
text="Go Back"
16+
@tap="$navigateBack"
17+
class="text-center px-4 py-10 text-2xl text-gray-900 font-bold"
18+
/>
19+
20+
<ContentView row="1" class="bg-[#65adf1] rounded-t-3xl">
21+
<ListView
22+
:items="items"
23+
separatorColor="transparent"
24+
class="bg-transparent"
25+
>
26+
<template #default="{ item }">
27+
<GridLayout columns="*, auto" class="px-4">
28+
<Label :text="item" class="text-3xl py-3 text-white" />
29+
<ContentView col="1" class="w-5 h-5 rounded-full bg-white" />
30+
</GridLayout>
31+
</template>
32+
</ListView>
33+
</ContentView>
34+
</GridLayout>
35+
</Page>
36+
</template>

‎packages/stackblitz-template/src/components/Home.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<script lang="ts" setup>
2+
import {
3+
ref,
4+
computed,
5+
onMounted,
6+
onUnmounted,
7+
$navigateTo,
8+
} from "nativescript-vue";
9+
import Details from "./Details.vue";
10+
11+
const counter = ref(0);
12+
const message = computed(() => {
13+
return `Blank {N}-Vue app: ${counter.value}`;
14+
});
15+
16+
function logMessage() {
17+
console.log("You have tapped the message!");
18+
}
19+
20+
let interval: any;
21+
onMounted(() => {
22+
console.log("mounted");
23+
interval = setInterval(() => counter.value++, 100);
24+
});
25+
26+
onUnmounted(() => {
27+
console.log("unmounted");
28+
clearInterval(interval);
29+
});
30+
</script>
31+
32+
<template>
33+
<Frame>
34+
<Page>
35+
<ActionBar>
36+
<Label text="Home" class="font-bold text-lg" />
37+
</ActionBar>
38+
39+
<GridLayout rows="*, auto, auto, *" class="px-4">
40+
<Label
41+
row="1"
42+
class="text-xl align-middle text-center text-gray-500"
43+
:text="message"
44+
@tap="logMessage"
45+
/>
46+
47+
<Button
48+
row="2"
49+
@tap="$navigateTo(Details)"
50+
class="mt-4 px-4 py-2 bg-white border-2 border-blue-400 rounded-lg"
51+
horizontalAlignment="center"
52+
>
53+
View Details
54+
</Button>
55+
</GridLayout>
56+
</Page>
57+
</Frame>
58+
</template>
59+
60+
<style>
61+
/* .info {
62+
font-size: 20;
63+
} */
64+
</style>

‎packages/stackblitz-template/tailwind.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
'./src/**/*.{css,xml,html,vue,svelte,ts,tsx}'
5+
],
6+
// use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
7+
darkMode: ['class', '.ns-dark'],
8+
theme: {
9+
extend: {},
10+
},
11+
plugins: [],
12+
corePlugins: {
13+
preflight: false // disables browser-specific resets
14+
}
15+
}

‎packages/stackblitz-template/tsconfig.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"target": "esnext",
5+
"module": "esnext",
6+
"moduleResolution": "node",
7+
"lib": ["dom", "esnext"],
8+
"sourceMap": true,
9+
"noEmitHelpers": true,
10+
"importHelpers": true,
11+
"baseUrl": ".",
12+
"paths": {
13+
"~/*": ["src/*"],
14+
"@/*": ["src/*"]
15+
},
16+
"typeRoots": ["types"],
17+
"types": ["node"],
18+
"allowSyntheticDefaultImports": true,
19+
"esModuleInterop": true,
20+
"experimentalDecorators": true,
21+
"emitDecoratorMetadata": true,
22+
"skipLibCheck": true
23+
},
24+
"include": ["src", "types"],
25+
"exclude": ["node_modules", "platforms"]
26+
}

‎packages/stackblitz-template/types/references.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference path="../node_modules/@nativescript/types/index.d.ts" />

‎packages/stackblitz-template/types/shims.vue.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.vue' {
2+
import type { DefineComponent } from 'nativescript-vue';
3+
const component: DefineComponent<{}, {}, any>;
4+
export default component;
5+
}

‎packages/template-blank/package.json

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@nativescript-vue/template-blank",
33
"main": "src/app.ts",
4-
"version": "3.0.0-beta.5",
4+
"version": "3.0.0-beta.6",
55
"dependencies": {
66
"@nativescript/core": "~8.5.0",
77
"nativescript-vue": "3.0.0-beta.6"
@@ -14,10 +14,5 @@
1414
"tailwindcss": "^3.1.8",
1515
"typescript": "~4.8.4",
1616
"vue": "^3.2.45"
17-
},
18-
"stackblitz": {
19-
"installDependencies": true,
20-
"compileTrigger": "save",
21-
"startCommand": "./node_modules/.bin/preview-cli"
2217
}
2318
}

0 commit comments

Comments
 (0)