├── static
    ├── icon.png
    └── favicon.ico
├── layouts
    └── default.vue
├── plugins
    └── ionic.js
├── .editorconfig
├── test
    └── Logo.spec.js
├── jest.config.js
├── pages
    └── index.vue
├── components
    └── Logo.vue
├── .github
    └── workflows
    │   └── ci.yaml
├── package.json
├── .gitignore
├── nuxt.config.js
├── .travis.yml
└── README.md


/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/daggerok/ionic-nuxt-app/HEAD/static/icon.png


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/daggerok/ionic-nuxt-app/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <ion-app>
3 |     <nuxt />
4 |   </ion-app>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/plugins/ionic.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | // import Ionic from '@ionic/vue';
3 | import { defineCustomElements as Ionic } from '@ionic/core/loader'; // add a direct link to @ionic/core
4 | 
5 | Vue.use(Ionic);
6 | Vue.config.ignoredElements = [
7 |   /^ion-/,
8 | ];
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/test/Logo.spec.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils';
 2 | import Logo from '@/components/Logo.vue';
 3 | 
 4 | describe('Logo', () => {
 5 |   test('is a Vue instance', () => {
 6 |     const wrapper = mount(Logo);
 7 |     expect(wrapper.isVueInstance()).toBeTruthy();
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleNameMapper: {
 3 |     '^@/(.*)$': '<rootDir>/$1',
 4 |     '^~/(.*)$': '<rootDir>/$1',
 5 |     '^vue$': 'vue/dist/vue.common.js',
 6 |   },
 7 |   moduleFileExtensions: [
 8 |     'js',
 9 |     'vue',
10 |     'json',
11 |   ],
12 |   transform: {
13 |     '.*\\.(js)$': 'babel-jest',
14 |     '.*\\.(vue)$': 'vue-jest',
15 |   },
16 |   collectCoverage: true,
17 |   collectCoverageFrom: [
18 |     '<rootDir>/components/**/*.vue',
19 |     '<rootDir>/components/*.vue',
20 |     '<rootDir>/layouts/**/*.vue',
21 |     '<rootDir>/layouts/*.vue',
22 |     '<rootDir>/pages/**/*.vue',
23 |     '<rootDir>/pages/*.vue',
24 |   ],
25 | };
26 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ion-page>
 3 |     <ion-header>
 4 |       <ion-toolbar class="toolbar-md-primary">
 5 |         <ion-title>Ionic Nuxt App</ion-title>
 6 |       </ion-toolbar>
 7 |     </ion-header>
 8 |     <Logo/>
 9 |     <ion-content class="content">
10 |       <ion-card>
11 |         <ion-card-subtitle>Ololo</ion-card-subtitle>
12 |         <ion-card-title>Trololo</ion-card-title>
13 |         <ion-card-content>
14 |           <h1>Hololo!</h1>
15 |         </ion-card-content>
16 |       </ion-card>
17 |     </ion-content>
18 |   </ion-page>
19 | </template>
20 | 
21 | <script>
22 |   import Logo from '~/components/Logo.vue';
23 | 
24 |   export default {
25 |     components: {
26 |       Logo,
27 |     },
28 |   };
29 | </script>
30 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
 3 |     <g fill="none" fill-rule="evenodd">
 4 |       <path
 5 |         d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
 6 |         fill="#00C58E"
 7 |       />
 8 |       <path
 9 |         d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
10 |         fill="#108775"
11 |       />
12 |       <path
13 |         d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
14 |         fill="#2F495E"
15 |         fill-rule="nonzero"
16 |       />
17 |     </g>
18 |   </svg>
19 | </template>
20 | <style>
21 | .NuxtLogo {
22 |   animation: 1s appear;
23 | }
24 | 
25 | @keyframes appear {
26 |   0% {
27 |     opacity: 0;
28 |   }
29 |   100% {
30 |     opacity: 1;
31 |   }
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yaml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | on: [push]
 3 | env:
 4 |   SPRING_PROFILES_ACTIVE: ci
 5 | jobs:
 6 |   tests:
 7 |     strategy:
 8 |       matrix:
 9 |         os: [ubuntu-latest]
10 |     runs-on: ${{ matrix.os }}
11 |     name: tests
12 |     steps:
13 |     - uses: actions/checkout@v1
14 |     - uses: actions/cache@v1
15 |       with:
16 |         path: ~/.n*
17 |         key: ${{ runner.os }}-javascript-${{ hashFiles('**/package.json') }}
18 |         restore-keys: |
19 |           ${{ runner.os }}-javascript-
20 |     - run: sudo apt-get install -y httpie
21 |     - run: command -v http >/dev/null 2>&1 || { echo >&2 "I require http (httpie), but it's not installed. Aborting."; exit 1; }
22 |     - uses: actions/setup-node@v1
23 |     - run: command -v npm >/dev/null 2>&1 || { echo >&2 "I require npm, but it's not installed. Aborting."; exit 1; }
24 |     - run: sudo npm i -g wait-port
25 |     - run: command -v wait-port >/dev/null 2>&1 || { echo >&2 "I require wait-port, but it's not installed. Aborting."; exit 1; }
26 |     - run: cd $GITHUB_WORKSPACE && npm i
27 |     - run: cd $GITHUB_WORKSPACE && npm audit fix
28 |     - run: cd $GITHUB_WORKSPACE && npm run pm2
29 |     - run: wait-port 5000
30 |     - run: http --ignore-stdin get :5000
31 |     - run: cd $GITHUB_WORKSPACE && npm stop
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-nuxt-app",
 3 |   "version": "0.0.0",
 4 |   "description": "My Ionic Nuxt.js app",
 5 |   "author": "Maksim Kostromin",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "test": "jest",
13 |     "predeploy": "cross-env BASE_HREF='/ionic-nuxt-app/' npm run generate",
14 |     "serve": "serve ./dist",
15 |     "prepm2": "npm run generate",
16 |     "pm2": "pm2 start 'npm run serve' --name app",
17 |     "restart": "pm2 restart app",
18 |     "logs": "pm2 logs",
19 |     "stop": "pm2 kill"
20 |   },
21 |   "dependencies": {
22 |     "@ionic/core": "5.1.0",
23 |     "@ionic/vue": "0.0.4",
24 |     "@nuxtjs/axios": "5.10.3",
25 |     "@nuxtjs/dotenv": "1.4.1",
26 |     "nuxt": "2.12.2"
27 |   },
28 |   "devDependencies": {
29 |     "@babel/preset-env": "7.9.6",
30 |     "@nuxtjs/pwa": "3.0.0-beta.20",
31 |     "@types/node": "13.13.4",
32 |     "@vue/test-utils": "1.0.0-beta.33",
33 |     "babel-jest": "25.5.1",
34 |     "cross-env": "7.0.2",
35 |     "jest": "24.9.0",
36 |     "pm2": "4.4.0",
37 |     "serve": "11.3.0",
38 |     "vue-jest": "4.0.0-beta.2"
39 |   },
40 |   "babel": {
41 |     "env": {
42 |       "test": {
43 |         "presets": [
44 |           [
45 |             "@babel/preset-env",
46 |             {
47 |               "targets": {
48 |                 "node": "current"
49 |               }
50 |             }
51 |           ]
52 |         ]
53 |       }
54 |     }
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | # Runtime data
10 | pids
11 | *.pid
12 | *.seed
13 | *.pid.lock
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | # Coverage directory used by tools like istanbul
17 | coverage
18 | # nyc test coverage
19 | .nyc_output
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | # Bower dependency directory (https://bower.io/)
23 | bower_components
24 | # node-waf configuration
25 | .lock-wscript
26 | # Compiled binary addons (https://nodejs.org/api/addons.html)
27 | build/Release
28 | # Dependency directories
29 | node_modules/
30 | jspm_packages/
31 | # TypeScript v1 declaration files
32 | typings/
33 | # Optional npm cache directory
34 | .npm
35 | # Optional eslint cache
36 | .eslintcache
37 | # Optional REPL history
38 | .node_repl_history
39 | # Output of 'npm pack'
40 | *.tgz
41 | # Yarn Integrity file
42 | .yarn-integrity
43 | # dotenv environment variables file
44 | .env
45 | # parcel-bundler cache (https://parceljs.org/)
46 | .cache
47 | # next.js build output
48 | .next
49 | # nuxt.js build output
50 | .nuxt
51 | # Nuxt generate
52 | dist
53 | # vuepress build output
54 | .vuepress/dist
55 | # Serverless directories
56 | .serverless
57 | # IDE / Editor
58 | .idea
59 | *.iml
60 | *.ipr
61 | *.iws
62 | *.log*
63 | # Service worker
64 | sw.*
65 | # Mac OSX
66 | .DS_Store
67 | # Vim swap files
68 | *.swp
69 | #
70 | */README.md
71 | package-lock.json
72 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | const baseHref = process.env.BASE_HREF || '/';
 2 | 
 3 | export default {
 4 |   mode: 'universal',
 5 |   head: {
 6 |     title: process.env.npm_package_name || '',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
11 |     ],
12 |     link: [
13 |       { rel: 'icon', type: 'image/x-icon', href: baseHref + 'favicon.ico' },
14 |     ]
15 |   },
16 |   /*
17 |   ** Customize the progress-bar color
18 |   */
19 |   loading: { color: '#fff' },
20 |   /*
21 |   ** Global CSS
22 |   */
23 |   css: [
24 |     '../node_modules/@ionic/core/css/core.css',
25 |     '../node_modules/@ionic/core/css/normalize.css',
26 |     '../node_modules/@ionic/core/css/structure.css',
27 |     '../node_modules/@ionic/core/css/typography.css',
28 |     '../node_modules/@ionic/core/css/ionic.bundle.css',
29 |   ],
30 |   /*
31 |   ** Plugins to load before mounting the App
32 |   */
33 |   plugins: [
34 |     { src: '~/plugins/ionic.js', mode: 'client' },
35 |   ],
36 |   /*
37 |   ** Nuxt.js dev-modules
38 |   */
39 |   buildModules: [
40 |     // '@nuxtjs/router',
41 |   ],
42 |   /*
43 |   ** Nuxt.js modules
44 |   */
45 |   modules: [
46 |     '@nuxtjs/pwa',
47 |     '@nuxtjs/axios',
48 |     '@nuxtjs/dotenv',
49 |   ],
50 |   /*
51 |   ** Axios module configuration
52 |   ** See https://axios.nuxtjs.org/options
53 |   */
54 |   axios: { },
55 |   /*
56 |   ** Build configuration
57 |   */
58 |   build: {
59 |     /*
60 |     ** You can extend webpack config here
61 |     */
62 |     extend (config, ctx) { }
63 |   },
64 |   generate: {
65 |     routes: [
66 |       '/',
67 |     ],
68 |   },
69 |   router: {
70 |     base: baseHref,
71 |     mode: 'history',
72 |   },
73 | };
74 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | notifications:
 2 |   email: false
 3 | git:
 4 |   quiet: true
 5 |   depth: false
 6 | language: node
 7 | node_js: lts/*
 8 | python: 3.8
 9 | service: docker
10 | os: linux
11 | arch: amd64
12 | addons:
13 |   apt:
14 |     update: true
15 |     packages:
16 |       - curl
17 |       - sudo
18 |       - lsof
19 |       - httpie
20 |       - docker-ce
21 | install: true
22 | before_install:
23 |   - export DISPLAY=:99.0
24 |   - |
25 |     if [ ! -f ${HOME}/.local/daggerok/bash-functions/master/main.bash ] ; then
26 |       mkdir -p ${HOME}/.local/daggerok/bash-functions/master ;
27 |       curl -s https://raw.githubusercontent.com/daggerok/bash-functions/master/main.bash > ${HOME}/.local/daggerok/bash-functions/master/main.bash ;
28 |     fi
29 |     source ${HOME}/.local/daggerok/bash-functions/master/main.bash ;
30 |   - stop_any 80 3000 5000 8080 5432
31 | cache:
32 |   directories:
33 |   - ~/.n*
34 |   - ./node_modules
35 |   - ~/.local/daggerok
36 | jobs:
37 |   include:
38 | 
39 |     - stage: test
40 |       name: test
41 |       before_script: cd $TRAVIS_BUILD_DIR && npm i
42 |       script: cd $TRAVIS_BUILD_DIR && npm t
43 | 
44 |     - stage: test
45 |       name: build and run
46 |       before_script:
47 |         - cd $TRAVIS_BUILD_DIR && npm i
48 |         - cd $TRAVIS_BUILD_DIR && npm run generate
49 |         - docker run -d --rm --name app -p 80:80 -v $TRAVIS_BUILD_DIR/dist:/usr/share/nginx/html:ro
50 |                         --health-cmd="wget -q --spider http://127.0.0.1:80/ || exit 1"
51 |                         --health-start-period=1s
52 |                         --health-interval=1s
53 |                         --health-retries=33
54 |                         --health-timeout=1s
55 |                         nginx:1.17.6-alpine
56 |         - wait_healthy_docker_containers 1
57 |       script: http :/
58 |       after_script: docker rm -f -v app
59 | 
60 |     - stage: deploy
61 |       name: build and deploy
62 |       script: skip
63 |       jdk: openjdk8
64 |       before_deploy:
65 |         - cd $TRAVIS_BUILD_DIR && npm i
66 |         - cd $TRAVIS_BUILD_DIR && npm run predeploy
67 |       env:
68 |         - secure: "hE413vOxGUojoT8WmbNtqiD/DVgBemMj4t05FcJ6qjcWHd9h3ATuGJrD3TocGzzytwFOV83vn4qp9utPGszDkiBqHN219qSabkBgKBuxWsSfEfWsc8EgSW4U87VccA9HD1+q6VWrgi8Q5gsgMZ1s2blP74uTmsbI+liUwARNlrHFOo5kty7xj4wEzB+RiaBtdvNE1FyYngVPK49bY0J4yjN79ZB1AaRk0jtGU5Ywy9xaoWCKs8EuMFY2hLoeB6CU3quAl33I36bOcK/0oxkPYj8DOwOt9veUOlOmr+wC76ABKT6k8j9iTM/SuAm7vQl3vogchHa1ioqHCJb7y+eFQsFUHMproPs8NhtC8RUg3z33aWgtKOG5+ZZOA52jyKCQ/FF4+qWU31EupYxssBRLGe2Lz6nLzF77s6f8l/WRo1ChRVKMlHMEK5OuZJtQ6DeZMralamnq/fMlXo9kvS3Jzcwgjs6lcXYkaeIF63+ctVb9sSloZhelLXrJFFeEZQZDQSf6mtO4epk7Vu/gh6OYRI9DiURllHxyzo/u/X3IgWfaRT78ClAIqasEeBzqRU0ezh5Fu5inLL6DGJnG9vNJ1gk2jG2BRdxIZA5Q4ZnkQ0OlLg9HH3vEilc8TR7ieEKajejYCg075aSCKAAyBU4sQgJECuy47bwtu8YBlwnExZQ="
69 |       deploy: &pages
70 |         provider: pages
71 |         skip-cleanup: true
72 |         keep-history: true
73 |         target_branch: gh-pages
74 |         # travis encrypt GITHUB_TOKEN=<your github repo token> --add
75 |         github-token: "$GITHUB_TOKEN"
76 |         local-dir: $TRAVIS_BUILD_DIR/dist
77 |         on:
78 |           all_branches: true
79 |           condition: $TRAVIS_BRANCH =~ ^(master|ci)$
80 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ionic-nuxt-app [![Build Status](https://travis-ci.org/daggerok/ionic-nuxt-app.svg?branch=master)](https://travis-ci.org/daggerok/ionic-nuxt-app) [![CI](https://github.com/daggerok/ionic-nuxt-app/workflows/CI/badge.svg)](https://github.com/daggerok/ionic-nuxt-app/actions?query=workflow%3ACI)
  2 | Ionic + Nuxt.js setup
  3 | 
  4 | ## setup
  5 | 
  6 | create regular nuxt app:
  7 | 
  8 | ```bash
  9 | npm i -g create-nuxt-app
 10 | create-nuxt-app ionic-nuxt-app
 11 | cd ionic-nuxt-app/
 12 | npm i -E @ionic/core @ionic/vue
 13 | 
 14 | # IMPORTANT:
 15 | npm i -ED jest@24.9.0
 16 | ```
 17 | 
 18 | add `plugins/ionic.js` file:
 19 | 
 20 | ```js
 21 | import Vue from 'vue';
 22 | // import Ionic from '@ionic/vue';
 23 | import { defineCustomElements as Ionic } from "@ionic/core/loader"; // add a direct link to @ionic/core
 24 | 
 25 | Vue.use(Ionic);
 26 | Vue.config.ignoredElements = [
 27 |   /^ion-/,
 28 | ];
 29 | ```
 30 | 
 31 | edit `layoutes/default.vue` file:
 32 | 
 33 | ```vue
 34 | <template>
 35 |   <ion-app>
 36 |     <nuxt />
 37 |   </ion-app>
 38 | </template>
 39 | ```
 40 | 
 41 | edit `pages/index.vue` file:
 42 | 
 43 | ```vue
 44 | <template>
 45 |   <!-- Add some ionic markup... -->
 46 |   <ion-page>
 47 |     <ion-header>
 48 |       <ion-toolbar class="toolbar-md-primary">
 49 |         <ion-title>Ionic Nuxt App</ion-title>
 50 |       </ion-toolbar>
 51 |     </ion-header>
 52 |     <Logo/>
 53 |     <ion-content class="content">
 54 |       <ion-card>
 55 |         <ion-card-subtitle>Ololo</ion-card-subtitle>
 56 |         <ion-card-title>Trololo</ion-card-title>
 57 |         <ion-card-content>
 58 |           <h1>Hololo!</h1>
 59 |         </ion-card-content>
 60 |       </ion-card>
 61 |     </ion-content>
 62 |   </ion-page>
 63 | </template>
 64 | 
 65 | <script>
 66 |   import Logo from '~/components/Logo.vue';
 67 | 
 68 |   export default {
 69 |     components: {
 70 |       Logo,
 71 |     },
 72 |   };
 73 | </script>
 74 | ```
 75 | 
 76 | finally, edit `nuxt.config.js` file:
 77 | 
 78 | ```js
 79 | // let's pick <base href="/ionic-nuxt-app/" /> when GitHub pages:
 80 | const baseHref = process.env.BASE_HREF || '/';
 81 | export default {
 82 |   head: {
 83 |     link: [
 84 |       // favicon for GitBub pages base href
 85 |       { rel: 'icon', type: 'image/x-icon', href: baseHref + 'favicon.ico' }
 86 |     ]
 87 |   },
 88 |   css: [
 89 |     // add required css:
 90 |     '../node_modules/@ionic/core/css/core.css',
 91 |     '../node_modules/@ionic/core/css/normalize.css',
 92 |     '../node_modules/@ionic/core/css/structure.css',
 93 |     '../node_modules/@ionic/core/css/typography.css',
 94 |     '../node_modules/@ionic/core/css/ionic.bundle.css',
 95 |   ],
 96 |   plugins: [
 97 |     // add created plugin:
 98 |     { src: '~/plugins/ionic.js', mode: 'client' },
 99 |   ],
100 |   generate: {
101 |     routes: [
102 |       '/',
103 |     ],
104 |   },
105 |   router: {
106 |     // router with correct public path
107 |     base: baseHref,
108 |     mode: 'history',
109 |   },
110 |   // skipped others...
111 | }
112 | ```
113 | 
114 | ## build, test and run
115 | 
116 | ```bash
117 | rm -rf node_modules package-lock.json dist ; npm i ; npm audit fix ; npm t
118 | npm start
119 | http :3000
120 | ```
121 | 
122 | ## resources
123 | 
124 | * https://forum.ionicframework.com/t/is-it-possible-to-use-ionic-with-nuxt/163202/3
125 | * https://ionicframework.com/docs/installation/cdn
126 | * [Nuxt.js docs](https://nuxtjs.org)
127 | * https://github.com/daggerok/webflux-kotlin-ionic-nuxt-mono-app
128 | * https://github.com/daggerok/typescript-ionic-nuxt-app
129 | * https://github.com/daggerok/spring-boot-nuxt-spa
130 | * https://github.com/daggerok/vue-ionic-example
131 | * https://github.com/daggerok/nuxt-examples
132 | * https://github.com/daggerok/vue-examples
133 | * https://alligator.io/vuejs/vue-ionic/
134 | 


--------------------------------------------------------------------------------