vue-month-picker in Nuxt

virtualorz

5 年前

使用vue-month-picker in Nuxt專案

參考文件

https://vuejsexamples.com/a-simple-and-elegant-month-picker-for-vue/

https://nuxtjs.org/docs/2.x/directory-structure/plugins

https://github.com/anteriovieira/vue-youtube/issues/33

以上三個參考文件分別是vue-month-picker安裝

以及分別在nuxt會遇到的兩個問題解決方案

首先，將vue plugin 新增到nuxt

依照官網文件，我們在plugins資料夾新增一個vue-month-picker.js

import Vue from 'vue'
import MonthPicker from 'vue-month-picker'
import MonthPickerInput from 'vue-month-picker'

Vue.use(MonthPicker)
Vue.use(MonthPickerInput)

import Vue from 'vue'

import MonthPicker from 'vue-month-picker'

import MonthPickerInput from 'vue-month-picker'

Vue.use(MonthPicker)

Vue.use(MonthPickerInput)

接著在nuxt.config.js中，plugins中加入

"~plugins/vue-month-picker.js"

1	"~plugins/vue-month-picker.js"

但是，這時候會出現錯誤訊息

nuxt Cannot use import statement outside a module

1	nuxt Cannot use import statement outside a module

依照官網上的錯誤資訊解決方法，我們在nuxt.config.js中，build中加入

transpile: ['vue-month-picker']

1	transpile: ['vue-month-picker']

接著會遇到另一個錯誤訊息

Vue.component is not a function

1	Vue.component is not a function

依照github上的文章，我們在page頁面中import稍做修改

將

import MonthPickerInput from 'vue-month-picker'

1	import MonthPickerInput from 'vue-month-picker'

修改為

import {MonthPickerInput} from 'vue-month-picker'

1	import {MonthPickerInput} from 'vue-month-picker'

最後在需要顯示month picker的地方加入以下component

<month-picker-input></month-picker-input>

1	<month-picker-input></month-picker-input>

總結以上，page頁面大約會長這個樣子

<template>
    <div>
        <month-picker-input></month-picker-input>
    </div>
</template>

<script>
import {MonthPickerInput} from 'vue-month-picker'
export default {
    data(){
        return {
            
        }
    },
    components: {
        MonthPickerInput
    }
}
</script>

<div>

<month-picker-input></month-picker-input>

</div>

</template>

import {MonthPickerInput} from 'vue-month-picker'

export default {

data(){

return {

}

components: {

MonthPickerInput

}

</script>

延伸閱讀: