How to setup a Cordova App using Vue.js with Vue Material Dashboard

Ini adalah tutorial, cara menggabungkan Cordova dengan Vue.js dengan menggunakan Vue Material Dashboard.

First, npm install -g cordova
npm install -g vue-cli
cordova create project-name
vue init webpack project-name
Terminal will ask you “Target directory exists. Continue?” because the project directory already exists because it was created in the previous Cordova step. “Yes” will be the right answer.
Write your project name, and then description, author.
Vue build ? Choose Runtime + Compiler
Install vue-router? (Y/n) . Write "Y" and then enter
Use ESLint to lint your code? (Y/n) . Write "n" and then enter
Set up unit tests (Y/n) . Write "n" and then enter. And Choose "Karma and Mocha"
Setup e2e tests with Nightwatch? (Y/n) . Write "n" and then enter
Should we run npm install for you after the project has been created? (recom mended) (Use arrow keys) . Choose "Yes, use NPM"
And then wait for minutes.

Open "www/index.html". And change

<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    <link rel="icon" type="image/png" sizes="96x96" href="<%= webpackConfig.output.publicPath %>favicon.png">
    <link rel="stylesheet" type="text/css" href="css/index.css">

     <!--  Fonts and icons     -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
    <title>River Cleaner</title>
</head>
<body>
    <div class="app">
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

So open the config/index.js file and change it in this way:

build: {
// Template for index.html
index: path.resolve(__dirname, '../www/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../www'),
assetsSubDirectory: 'static',
assetsPublicPath: '',

productionSourceMap: true,

devtool: '#source-map',

productionGzip: false,
productionGzipExtensions: ['js', 'css'],

bundleAnalyzerReport: process.env.npm_config_report
}

Copy all file vue from vue-material-dashboard in folder src
Move to folder Cordova project in folder src
Open your terminal, and then change directory to your project
npm install
npm audit fix
npm install
cordova platform add android
npm run build
cordova build android
Finish

if you find an error in the font or icon, you add in root index.html:

<!--  Fonts and icons     -->
        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
        <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
        <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

Referensi :

https://medium.com/@valeriocapogna/how-to-setup-a-cordova-app-using-vue-js-8ba1315b9666 [Accessed: September 2019]
https://www.creative-tim.com/templates/vuejs-dashboard [Accessed: September 2019]

budiodank / notif-app

How to setup a Cordova App using Vue.js with Vue Material Dashboard #3