Route::get('/', function() { return 'Hello World'; });
export default { components: { Logo, VuetifyLogo }, async asyncData(app) { const data = await app.$axios.$get('http://localhost:8000/api') return { data } } } v-card-title class="headline"> {{ data }} /v-card-title>
yarn add @nuxtjs/proxy //nuxt.config.js const environment = process.env.NODE_ENV || 'development'; export default { mode: 'universal', /* ** Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ ], /* ** Plugins to load before mounting the App */ plugins: [ ], /* ** Nuxt.js dev-modules */ buildModules: [ ], /* ** Nuxt.js modules */ modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/proxy', ], proxy: { '/api': (environment === 'development') ? 'http://localhost:8000' : 'https://example.com' }, /* ** Axios module configuration ** See https://axios.nuxtjs.org/options */ axios: { }, /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend (config, ctx) { } } } 開発環境: /api → http://localhost:8000/api 開発環境以外: /api → https//example.com/api にそれぞれアクセスを変更する設定です。 これで以下のようにホスト名を省略した記述が可能になります。 import Logo from '~/components/Logo.vue' export default { components: { Logo }, async asyncData(app) { const data = await app.$axios.$get('/api') return { data } } }