{"id":20640775,"url":"https://github.com/yassilah/vue-web-native","last_synced_at":"2025-07-12T13:05:07.367Z","repository":{"id":133010311,"uuid":"129787237","full_name":"yassilah/vue-web-native","owner":"yassilah","description":"Vue+Web+Native","archived":false,"fork":false,"pushed_at":"2018-04-16T18:32:16.000Z","size":1874,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T23:15:26.323Z","etag":null,"topics":["cross-platform","nativescript","vue","vue-loader","vuejs","webpack"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yassilah.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-16T18:20:49.000Z","updated_at":"2024-05-30T16:26:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"ada3ac2b-76f6-4597-aea1-bfe1f2eb2ec3","html_url":"https://github.com/yassilah/vue-web-native","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yassilah/vue-web-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yassilah%2Fvue-web-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yassilah%2Fvue-web-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yassilah%2Fvue-web-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yassilah%2Fvue-web-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yassilah","download_url":"https://codeload.github.com/yassilah/vue-web-native/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yassilah%2Fvue-web-native/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264995128,"owners_count":23694887,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-platform","nativescript","vue","vue-loader","vuejs","webpack"],"created_at":"2024-11-16T15:31:12.304Z","updated_at":"2025-07-12T13:05:07.349Z","avatar_url":"https://github.com/yassilah.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Vue+Web+Native\n\n***THIS PROJECT IS UNDER DEVELOPMENT AND STILL AT AN EARLY STAGE.***\n\n**Vue+Web+Native** is a boilerplate based on [**Vue**](https://vuejs.org/) and [**Nativescript**](https://nativescript-vue.org) that allows for simultaneous development of web and native applications. \n\n## Contents\n- [Before we start](#before-we-start)\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Usage](#usage)\n\t- [Commands](#commands)\n\t- [In single-file components](#in-single-file-components)\n\t- [In all other files](#in-all-other-files)\n\t- [Add nativescript packages](#add-nativescript-packages)\n- [License](#license)\n\n## Before we start\n**Vue+Web+Native** uses [**vue-native-web**](https://www.npmjs.com/package/vue-native-web) to compile all your files. These are the main features.\n\n - [x] Latest version of **vue-loader**\n - [x] Latest version of **nativescript**\n - [x] CSS/SCSS/SASS\n - [x] Hot reload (for web **only**)\n - [x] Vue single-file components\n - [x] Extract CSS\n - [x] Target either **native** or **web**\n - [ ] Target either **iOS**, **Android** or **web**\n - [ ] Custom blocks in single-file components\n\n## Installation\nIf you want to try it out **Vue+Web+Native** is set up with default values.\n```\ngit clone https://github.com/yassipad/vue-web-native.git\ncd vue-web-native\n```\n\nThen you simply need to install the dependencies.\n```\nnpm install\n```\nor\n```\nyarn install\n```\n\nAnd you're set!\n\n## Configuration\nThere are a few things that are necessary to be able to use this boilerplate. By default, everything is already in place, so you should not run into any issues.\n\nFirst, you need to make sure that your root folder contains an **App_Resources** folder with all the files required by your native app (e.g. splashscreens, configuration...). \n\n**`For iOS, you should also specifiy your DEVELOPMENT_TEAM in the App_Resources/iOS/build.xconfig file.`**\n\nSecond, you also need to make sure that your **src** folder contains an **assets** folder, which will contain all your assets for both native and web apps. \n\nThird, you will notice that the **package.json** file contains this:\n`\"nativescript\" : {\n  \"id\": \"org.vuenativeweb.app\"\n}`. This key is **asbolutely** required as this corresponds to your **App Id**. This will automatically get copied into the right places for you, you are free to change it but do not remove it.\n\n## Usage\n\n### Commands\nThese are the available commands.\n\n`build`: build iOS, Android and web apps in production mode.  \n`build:native`: build iOS and Android apps in production mode.  \n`build:web`: build web app in production mode.  \n`build:android`: build android app in production mode.  \n`build:ios`: build iOS app in production mode.  \n\n`watch`: build iOS, Android and web apps in development mode and watches for changes.  \n`watch:native`: build iOS and Android apps in development mode and watches for changes.  \n`watch:web`: build web app in development mode and watches for changes.  \n`watch:android`: build Android app in development mode and watches for changes.  \n`watch:ios`: build iOS app in development mode and watches for changes.  \n\n`debug`: build iOS, Android and web apps in development mode with --debug option for native apps.  \n`debug:native`: build iOS and Android apps in development mode with --debug option.  \n`debug:android`: build Android app in development mode with --debug option.  \n`debug:ios`: build iOS app in development mode with --debug option.  \n\n`hot`: build web app in development mode with hot reload.  \n`dev`: build web app in development mode.  \n\n### In single-file components\nIn single-file components, you can now add two attributes to your blocks: **native** or **web**. This attribute will tell **webpack** which part of this file to compile to which file.\n\n**Example:**\n\n    \u003ctemplate web\u003e\n\t    \u003ch1\u003eBonjour sur {{platform}}!\u003c/h1\u003e\n    \u003c/template\u003e\n    \n    \u003ctemplate native\u003e\n\t    \u003cLabel class=\"h1\"\u003eBonjour sur {{platform}}!\u003c/Label\u003e\n    \u003c/template\u003e\n\nThis also works on `\u003cscript\u003e` and `\u003cstyle\u003e`. For the moment, **custom blocks are not supported**. And of course, you can still add all the other attributes you are used to.\n\n**Example:**\n\t\n\t\u003cstyle lang=\"sass\" native scoped\u003e\n    Page\n\t    background-color: black\n\t\u003c/style\u003e\n\nIf you do not add a specific attribute, the block will be compiled to both targets (native and web).\n\n**Example:**\n\n\t\u003ctemplate web\u003e\n\t    \u003ch1 class=\"title\"\u003e{{message}}\u003c/h1\u003e\n\t\u003c/template\u003e\n\t\n\t\u003ctemplate native\u003e\n\t    \u003cLabel class=\"title\"\u003e{{message}}\u003c/Label\u003e\n\t\u003c/template\u003e\n\t\n\t\u003cscript\u003e\n\texport default { \n\t\tdata () {\n\t\t\treturn {\n\t\t\t\tmessage: 'Salut' \n\t\t\t}\n\t\t}\n\t}\n\t\u003c/script\u003e\n\t\n\t\u003cstyle lang=\"css\" scoped\u003e\n\t.title {\n\t\tcolor: red;\n\t}\n\t\u003c/style\u003e\n\t\n\t\u003cstyle lang=\"sass\" native\u003e\n\t.title\n\t\tfont-size: 30px\n\t\u003c/style\u003e\n\t\n### In all other files\nIn other files you can also tell webpack which part of said file are meant to be compiled for which target bu using two markers: **/\\*--@web--\\*/** and **/\\*--@native--\\*/**.\n\n**Example:**\n\t\n\timport Vue from 'vue'\n\timport App from './components/App'\n\t\n\tconst app = new Vue({\n\t\trender: h =\u003e h(App)\n\t})\n\t\n\t/*--@web--*/\n\tapp.$mount('#app')\n\t/*--@web--*/\n\t\n\t/*--@native--*/\n\tapp.$start()\n\t/*--@native--*/\n\nThis can also be useful to only import the files you want.\n\n**Example:**\n\n\t/*--@native--*/\n\timport stripe from 'nativescript-stripe'\n\t/*--@native--*/\n\t\n\t/*--@web--*/\n\timport stripe from 'stripe'\n\t/*--@web--*/\n\t\n\tstripe.doSomething()\n\t\n### Add nativescript packages\nYou can add **nativescript** packages as usual simply by running:\n```\nnpm install nativescript-package\n```\nor\n```\nyarn add nativescript-package\n```\nWebpack will then automatically detect whether your package is meant for **nativescript** or not and add it to the dependencies of your native app if it is.\n\n## License\nMIT\n\n## Contributions\nAs stated earlier, this project is still in a very early development stage so any contribution is welcome at this point. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyassilah%2Fvue-web-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyassilah%2Fvue-web-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyassilah%2Fvue-web-native/lists"}