<script type="text/x-template" id="app-template">
  <v-app>
    <v-container>
      <!-- -->
     <div class="container" :style="containerStyle">
        <v-card
            v-for="article of articles"
            :key="article.id"
            class="mx-auto"
            max-width="344">
            <a :href="article.url" target="_blank">
                <v-img :src="article.cover_image">
                </v-img>
            </a>
            <v-card-text>
                <v-card-title>
                    {{article.title}}
                </v-card-title>
            </v-card-text>
            <v-card-actions class="pt-0">
                <v-btn
                    text
                    color="teal accent-4"
                    target="_blank"
                    :href="article.url">
                    Read <v-icon>external-link</v-icon>
                </v-btn>
            </v-card-actions>
        </v-card>
    </div>
    </v-container>
  </v-app>
</script>

<div id="app"></div>

// Looking for the v1.5 template?
// https://codepen.io/pen?template=GVoaNe

const App = {
  template: '#app-template',
  data: () => ({
            articles: [],
            userName: 'venatus',
            containerStyle: {
              display: 'flex',
              flexDirection: 'column',
              gap: '20px'
            }
        }),

    methods: {
        async getArticles() {
            return axios.get(`https://dev.to/api/articles?username=${this.userName}`);
        },
    },

    async created() {
        this.articles = (await this.getArticles())
            .data
            .filter(article => article.type_of ==='article');
    }
}


new Vue({
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')