Não entendi porque não pode ser em javascript puro. Afinal, Vue.JS também é em javascript puro, é só usar o código no framework.
Você pode criar um array com o nome dos meses e pegar o nome correto usando o resultado de Date.getMonth()
como índice.
function formatDate(date) {
let dia = date.getDate()
let mes = [
'janeiro', 'fevereiro', 'março', 'abril',
'maio', 'junho', 'julho', 'agosto', 'setembro',
'outubro', 'novembro', 'dezembro'
][date.getMonth()]
let ano = date.getFullYear()
return `${dia} de ${mes} de ${ano}`
}
let hoje = new Date()
console.log(formatDate(hoje))
Se a compatibilidade de browser não for um problema, você pode usar o método Date.toLocaleDateString()
e configurar para que a saída seja a que você quer:
let hoje = new Date()
let data_formatada = hoje.toLocaleDateString('pt-BR', {
day: 'numeric',
month: 'long',
year: 'numeric'
})
console.log(data_formatada)
Você pode usar a lógica acima no Vue como bem entender.
function formatDate(date) {
let dia = date.getDate()
let mes = [
'janeiro', 'fevereiro', 'março', 'abril',
'maio', 'junho', 'julho', 'agosto', 'setembro',
'outubro', 'novembro', 'dezembro'
][date.getMonth()]
let ano = date.getFullYear()
return `${dia} de ${mes} de ${ano}`
}
let formatter = new Intl.DateTimeFormat('pt-BR', {
day: 'numeric',
month: 'long',
year: 'numeric'
})
new Vue({
el: '#app',
data:{
hoje: new Date()
},
filters: {
date: formatDate,
date_2: formatter.format
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{ hoje | date }} <br>
{{ hoje | date_2 }}
</div>