├── .editorconfig ├── .eslintrc.js ├── .github └── workflows │ └── workflow.yml ├── .gitignore ├── .nvmrc ├── .stylelintrc.json ├── README.md ├── README_ja-JP.md ├── babel.config.js ├── jest.config.js ├── nuxt.config.js ├── package-lock.json ├── package.json ├── renovate.json ├── src ├── assets │ ├── README.md │ ├── fonts │ │ └── KosugiMaru-Regular.woff │ └── scss │ │ ├── _fonts.scss │ │ ├── _partial.scss │ │ ├── _variables.scss │ │ └── main.scss ├── components │ ├── Footer.vue │ ├── Header.vue │ ├── README.md │ ├── SearchForm.vue │ └── SearchResult.vue ├── layouts │ ├── README.md │ ├── default.vue │ ├── error.vue │ └── navbar.vue ├── middleware │ └── README.md ├── pages │ ├── README.md │ ├── index.vue │ └── search.vue ├── plugins │ ├── README.md │ ├── element-ui.js │ ├── filters.js │ └── vue-scrollto.js ├── static │ ├── README.md │ └── favicon.ico └── store │ ├── README.md │ └── index.js └── test └── specs └── pages └── index.spec.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 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 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | ecmaVersion: 2015, 6 | sourceType: 'module' 7 | }, 8 | extends: '@nuxtjs' 9 | } 10 | -------------------------------------------------------------------------------- /.github/workflows/workflow.yml: -------------------------------------------------------------------------------- 1 | name: Main workflow 2 | 3 | on: push 4 | 5 | jobs: 6 | workflow: 7 | runs-on: ubuntu-latest 8 | 9 | strategy: 10 | matrix: 11 | node-version: [12.x] 12 | 13 | steps: 14 | - uses: actions/checkout@v2 15 | - uses: actions/setup-node@v1 16 | with: 17 | node-version: ${{ matrix.node-version }} 18 | - name: fetch cache 19 | id: npm-cache 20 | run: | 21 | echo "::set-output name=dir::$(npm config get cache)" 22 | - uses: actions/cache@v1 23 | with: 24 | path: ${{ steps.npm-cache.outputs.dir }} 25 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 26 | restore-keys: | 27 | ${{ runner.os }}-node- 28 | - name: npm install 29 | run: npm ci 30 | - name: npm lint 31 | run: npm run lint 32 | - name: npm test 33 | run: npm run test:ci 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | 13 | # yarn 14 | yarn.lock 15 | 16 | #mine 17 | gh-pages 18 | coverage 19 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 12.18.4 2 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "stylelint-scss" 4 | ], 5 | "rules": { 6 | "scss/selector-no-redundant-nesting-selector": true, 7 | "scss/comment-no-loud": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hello-nuxt 2 | 3 | ![Main workflow](https://github.com/aytdm/hello-nuxt/workflows/Main%20workflow/badge.svg?branch=master) 4 | 5 | ## What is this? 6 | 7 | This is a example application of Nuxt.js + Element-ui + axios. 8 | 9 | ## Build Setup 10 | 11 | ``` bash 12 | # install dependencies 13 | $ npm install 14 | 15 | # serve with hot reload at localhost:3000 16 | $ npm run dev 17 | 18 | # build for production and launch server 19 | $ npm run build 20 | $ npm start 21 | 22 | # generate static project 23 | $ npm run generate 24 | ``` 25 | 26 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 27 | -------------------------------------------------------------------------------- /README_ja-JP.md: -------------------------------------------------------------------------------- 1 | # hello-nuxt 2 | 3 | ## これは何？ 4 | 5 | Nuxt.js、Element-ui、axiosを使ったサンプルアプリケーションです。 6 | デモ： https://aytdm.github.io/hello-nuxt 7 | 8 | ## セットアップ方法 9 | 10 | ```bash 11 | # install dependencies 12 | $ npm install # Or yarn install 13 | 14 | # serve with hot reload at localhost:3000 15 | $ npm run dev 16 | 17 | # build for production and launch server 18 | $ npm run build 19 | $ npm start 20 | 21 | # generate static project 22 | $ npm run generate 23 | ``` 24 | 25 | 詳細な説明は[Nuxt.js docs](https://github.com/nuxt/nuxt.js)を参照してください。 26 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api && api.cache(false) 3 | 4 | return { 5 | presets: [ 6 | [ 7 | '@babel/env', { 8 | targets: { 9 | node: 'current' 10 | } 11 | } 12 | ] 13 | ] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | verbose: true, 3 | moduleFileExtensions: [ 4 | 'js', 5 | 'vue' 6 | ], 7 | transform: { 8 | '^.+\\.js$': 'babel-jest', 9 | '.*\\.(vue)$': 'vue-jest' 10 | }, 11 | moduleNameMapper: { 12 | '^@/(.*)$': '/src/$1', 13 | '^~/(.*)$': '/src/$1' 14 | }, 15 | collectCoverage: false, 16 | collectCoverageFrom: [ 17 | '/components/**/*.vue', 18 | '/pages/**/*.vue' 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | mode: 'spa', 3 | srcDir: 'src/', 4 | /* 5 | ** Headers of the page 6 | */ 7 | head: { 8 | title: 'hello-nuxt', 9 | meta: [ 10 | { charset: 'utf-8' }, 11 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 12 | { hid: 'description', name: 'description', content: 'Nuxt.js project' } 13 | ], 14 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] 15 | }, 16 | 17 | /* 18 | ** Customize the progress-bar color 19 | */ 20 | loading: { color: '#3B8070' }, 21 | 22 | /* 23 | ** Global CSS 24 | */ 25 | css: [ 26 | 'element-ui/lib/theme-chalk/index.css', 27 | '~/assets/scss/main.scss' 28 | ], 29 | 30 | /* 31 | ** Plugins to load before mounting the App 32 | */ 33 | plugins: [ 34 | { src: '~/plugins/element-ui', mode: 'client' }, 35 | { src: '~/plugins/vue-scrollto', mode: 'client' }, 36 | { src: '~/plugins/filters', mode: 'client' } 37 | ], 38 | 39 | /* 40 | ** Nuxt.js modules 41 | */ 42 | modules: [ 43 | '@nuxtjs/style-resources' 44 | ], 45 | styleResources: { 46 | scss: [ 47 | '~/assets/sccs/*.scss' 48 | ] 49 | }, 50 | 51 | /* 52 | ** Build configuration 53 | */ 54 | build: { 55 | transpile: [/^element-ui/], 56 | 57 | /* 58 | ** You can extend webpack config here 59 | */ 60 | extend (config, { isDev }) { 61 | if (isDev && process.isClient) { 62 | config.module.rules.push({ 63 | enforce: 'pre', 64 | test: /\.(js|vue)$/, 65 | loader: 'eslint-loader', 66 | exclude: /(node_modules)/ 67 | }) 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-nuxt", 3 | "version": "1.3.2", 4 | "description": "Nuxt.js project", 5 | "author": "numa", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "npm run lint:js && npm run lint:css", 13 | "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", 14 | "lint:css": "stylelint --fix \"src/**/*.{scss,vue}\"", 15 | "precommit": "npm run lint", 16 | "analyze": "nuxt build --analyze", 17 | "test": "jest --verbose", 18 | "test:ci": "jest --ci" 19 | }, 20 | "dependencies": { 21 | "axios": "0.20.0", 22 | "dayjs": "1.9.1", 23 | "element-ui": "2.13.2", 24 | "nuxt": "2.14.6", 25 | "vue-scrollto": "2.18.2" 26 | }, 27 | "devDependencies": { 28 | "@nuxtjs/eslint-config": "3.1.0", 29 | "@nuxtjs/style-resources": "1.0.0", 30 | "@vue/test-utils": "1.1.0", 31 | "babel-core": "7.0.0-bridge.0", 32 | "babel-eslint": "10.1.0", 33 | "babel-jest": "26.5.0", 34 | "browser-env": "3.3.0", 35 | "eslint": "7.10.0", 36 | "eslint-plugin-import": "2.22.1", 37 | "jest": "26.4.2", 38 | "node-sass": "4.14.1", 39 | "require-extension-hooks-babel": "1.0.0", 40 | "sass-loader": "10.0.2", 41 | "stylelint": "13.7.2", 42 | "stylelint-scss": "3.18.0", 43 | "vue-jest": "3.0.7" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:base"], 3 | "assignees": ["aytdm"], 4 | "packageRules": [ 5 | { 6 | "updateTypes": ["minor", "patch"], 7 | "automergeType": "pr", 8 | "automerge": true 9 | } 10 | ], 11 | "labels": ["dependencies"], 12 | "enabled": false 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /src/assets/fonts/KosugiMaru-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aytdm/hello-nuxt/6db20128056d0c79bb599a7b56d3c93b241d28f3/src/assets/fonts/KosugiMaru-Regular.woff -------------------------------------------------------------------------------- /src/assets/scss/_fonts.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // ============================================================================= 4 | // Font Face 5 | // ============================================================================= 6 | @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) { 7 | $src: null; 8 | 9 | $extmods: ( 10 | eot: "?", 11 | svg: "#" + str-replace($name, " ", "_") 12 | ); 13 | 14 | $formats: ( 15 | otf: "opentype", 16 | ttf: "truetype" 17 | ); 18 | 19 | @each $ext in $exts { 20 | $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext); 21 | $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext); 22 | $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma); 23 | } 24 | 25 | @font-face { 26 | font-family: quote($name); 27 | font-style: $style; 28 | font-weight: $weight; 29 | src: $src; 30 | } 31 | } 32 | 33 | // ============================================================================= 34 | // Font Size 35 | // ============================================================================= 36 | @mixin font-size($size: 16) { 37 | font-size: #{$size}px; 38 | font-size: #{$size / 10}rem; 39 | } 40 | -------------------------------------------------------------------------------- /src/assets/scss/_partial.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // ============================================================================= 4 | // Header/Footer 5 | // ============================================================================= 6 | .header-fotter { 7 | padding: 0.938rem; 8 | height: 1.875rem; 9 | } 10 | -------------------------------------------------------------------------------- /src/assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | $DEFAULT_COLOR : #59bb0c; 4 | $DEFAULT_TEXT_COLOR : #fff; 5 | $VISITED_TEXT_COLOR :#3b8070; 6 | $WARNING_TEXT_COLOR :#3b8070; 7 | -------------------------------------------------------------------------------- /src/assets/scss/main.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import 'fonts'; 4 | @import 'variables'; 5 | @import 'partial'; 6 | 7 | html, body { 8 | -ms-text-size-adjust: 100%; 9 | -webkit-text-size-adjust: 100%; 10 | -moz-osx-font-smoothing: grayscale; 11 | -webkit-font-smoothing: antialiased; 12 | box-sizing: border-box; 13 | padding: 0; 14 | margin: 0; 15 | height: 100%; 16 | width: 100%; 17 | @include font-face('Kosugi Maru', '/src/assets/fonts/KosugiMaru-Regular', null, null, woff); 18 | font-family: 'Kosugi Maru', 'Segoe UI'; 19 | font-size: 16px; 20 | word-spacing: 0.0625rem; 21 | background-color: $DEFAULT_COLOR; 22 | color: $DEFAULT_TEXT_COLOR; 23 | a { 24 | text-decoration: none; 25 | &:link, &:visited { 26 | color: $DEFAULT_TEXT_COLOR; 27 | } 28 | } 29 | 30 | *, *:before, *:after { 31 | margin: 0; 32 | } 33 | } 34 | 35 | .header { 36 | @include font-size(12); 37 | @extend .header-fotter; 38 | top: 0; 39 | } 40 | 41 | .footer { 42 | @extend .header-fotter; 43 | bottom: 0; 44 | } 45 | 46 | .top { 47 | .container { 48 | min-height: 100vh; 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | text-align: center; 53 | word-spacing: 0.1875rem; 54 | 55 | h1 { 56 | font-weight: 550; 57 | @include font-size(60); 58 | letter-spacing: 0.375rem; 59 | } 60 | h4 { 61 | font-weight: normal; 62 | @include font-size(11); 63 | padding-top: 1.5rem; 64 | padding-bottom: 1.875rem; 65 | } 66 | 67 | .links { 68 | padding-top: 0.938rem; 69 | .button-white { 70 | display: inline-block; 71 | border-radius: 0.25rem; 72 | border: 0.0625rem solid $DEFAULT_TEXT_COLOR; 73 | text-decoration: none; 74 | padding: 0.625rem 1.875rem; 75 | } 76 | } 77 | } 78 | } 79 | 80 | .error-container { 81 | padding: 18.75rem; 82 | text-align: center; 83 | h1 { 84 | @include font-size(12); 85 | } 86 | } 87 | 88 | #page_top { 89 | background-color: $DEFAULT_TEXT_COLOR; 90 | color: $WARNING_TEXT_COLOR; 91 | 92 | a { 93 | &:link, &:visited { 94 | color: $DEFAULT_COLOR; 95 | } 96 | &:hover { 97 | color: $VISITED_TEXT_COLOR; 98 | } 99 | } 100 | 101 | .el-form { 102 | margin-top: 1rem; 103 | margin-left: 1rem; 104 | } 105 | 106 | .content-style { 107 | line-height: 1.875rem; 108 | @include font-size(8.5); 109 | } 110 | 111 | .tag-style { 112 | margin-right: 0.313rem; 113 | } 114 | 115 | .box-card { 116 | height: 22.5rem; 117 | @include font-size(9.5); 118 | } 119 | 120 | .col-style { 121 | padding: 0.625rem; 122 | } 123 | 124 | .page-component-up { 125 | background-color: $DEFAULT_COLOR; 126 | position: fixed; 127 | right: 5rem; 128 | bottom: 5rem; 129 | width: 2.5rem; 130 | height: 2.5rem; 131 | border-radius: 1.25rem; 132 | cursor: pointer; 133 | transition: 0.5s; 134 | box-shadow: 0 0 0.438rem rgba(0,0,0,0.4); 135 | i { 136 | color: $DEFAULT_TEXT_COLOR; 137 | display: block; 138 | line-height: 2.5rem; 139 | text-align: center; 140 | @include font-size(14); 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /src/components/SearchForm.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 58 | -------------------------------------------------------------------------------- /src/components/SearchResult.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 69 | -------------------------------------------------------------------------------- /src/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/layouts/error.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 28 | -------------------------------------------------------------------------------- /src/layouts/navbar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | -------------------------------------------------------------------------------- /src/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /src/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and create the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /src/pages/search.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 31 | -------------------------------------------------------------------------------- /src/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /src/plugins/element-ui.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import ElementUI from 'element-ui' 3 | import locale from 'element-ui/lib/locale/lang/ja' 4 | 5 | Vue.use(ElementUI, { locale }) 6 | -------------------------------------------------------------------------------- /src/plugins/filters.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import dayjs from 'dayjs' 3 | 4 | Vue.filter('formatDate', function (value) { 5 | if (value) { 6 | return dayjs().format('YYYY/MM/DD hh:mm') 7 | } 8 | }) 9 | 10 | Vue.filter('description', function (value) { 11 | if (value) { 12 | return value.slice(0, 100) + '...' 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /src/plugins/vue-scrollto.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | const VueScrolltop = require('vue-scrollto') 4 | Vue.use(VueScrolltop) 5 | -------------------------------------------------------------------------------- /src/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /src/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aytdm/hello-nuxt/6db20128056d0c79bb599a7b56d3c93b241d28f3/src/static/favicon.ico -------------------------------------------------------------------------------- /src/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | const BASE_URL = 'https://qiita.com/api/v2/' 4 | 5 | export const state = () => ({ 6 | lists: [], 7 | isLoading: false 8 | }) 9 | 10 | export const mutations = { 11 | setItems (state, lists) { 12 | state.lists = lists 13 | }, 14 | hideLoading (state) { 15 | state.isLoading = false 16 | }, 17 | showLoading (state) { 18 | state.isLoading = true 19 | } 20 | } 21 | 22 | export const actions = { 23 | async getItems ({ commit }, payload) { 24 | commit('showLoading') 25 | const response = await axios.get(`${BASE_URL}items`, { 26 | headers: { 'Content-Type': 'application/json' }, 27 | params: { 28 | page: 1, 29 | per_page: 20, 30 | query: payload.keyword 31 | }, 32 | timeout: 15000 33 | }).catch(() => { 34 | commit('hideLoading') 35 | this.$router.push('/error') 36 | }) 37 | commit('setItems', response.data) 38 | commit('hideLoading') 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /test/specs/pages/index.spec.js: -------------------------------------------------------------------------------- 1 | 2 | import { shallowMount, RouterLinkStub } from '@vue/test-utils' 3 | import TopPage from '~/pages/index.vue' 4 | 5 | describe('TopPage', () => { 6 | test('able to render HTML', () => { 7 | const wrapper = shallowMount(TopPage, { 8 | stubs: { 9 | NuxtLink: RouterLinkStub 10 | } 11 | }) 12 | expect(wrapper.find('.container').isVisible()).toBeTruthy() 13 | }) 14 | }) 15 | --------------------------------------------------------------------------------