2 months ago

Vue not rendering

Posted 2 months ago by hjortur17

I can't figure out why I'm not seeing anything on the screen. There is no error messages in the console or in the browser. If I look in the app.js file through the web browser I see some of the stuff I'm doing in my component but I do not see the component itself.


window.Vue = require('vue');

Vue.component('santa', require('./components/SantaComponent.vue').default);

const app = new Vue({
    el: '#app',
    <div class="container mx-auto max-w-5xl px-6 md:px-0 mb-16">
        <section id="todaySanta" class="my-16">
            <div class="w-full" v-for="(items, santa) in santas">
                <div v-if="isNext(items.date_on_arrival)">
                    <h2 class="text-5xl font-bold text-center mb-8">{{ items.name }} kemur í kvöld</h2>
                    <div class="flex">
                        <div class="w-64">
                            <img :src="items.link_to_image">
                        <div class="flex-1 self-center px-4">
                            <p class="text-lg leading-relaxed" v-text="items.description"></p>

            <div class="w-full flex justify-between">
                <p class="uppercase text-xs text-gray-500 mb-2 select-none">Næstu jólasveinar</p>
                <p class="uppercase text-xs text-gray-500 mb-2 select-none">Í dag er: <span v-text="todayFormated"></span></p>

            <div class="shadow rounded-lg p-12">
                <div class="w-full" v-for="(items, santa) in santas">
                    <div class="flex flex-col" v-if="isAfter(items.date_on_arrival)">
                        <div class="w-full flex">
                            <div class="w-32 h-32">
                                <img :src="items.link_to_image" class="max-h-full mx-auto">
                            <div class="flex-1 self-center px-4">
                                <h2 class="text-xl font-bold mb-2" v-text="items.name"></h2>
                                <p class="text-sm" v-text="items.description"></p>  

                    <hr class="border my-8">

import dayjs from 'dayjs';

export default {
    data() {
        return {
            today: dayjs(),
            todayFormated: dayjs().format('DD/MM/YYYY'),
            // today: dayjs().subtract(5, 'days').add(2, 'months'),  USE THIS IF YOU NEED TO IF THE METHODS WORKS

            santas: [],

    methods: {
        getSantas() {
            .then(response => {
                this.santas = response.data.map(santas => santas);

        isPassed(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            return dayjs(tempDate).isBefore(this.today);

        isNext(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear).millisecond(1);

            return dayjs(tempDate).isSame(dayjs(this.today).millisecond(1));

        isAfter(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            return dayjs(tempDate).isAfter(dayjs(this.today).add(1,'day'));

    mounted() {
<!DOCTYPE html>
<html lang="is">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @include ('partials.navbar')
    @yield ('header')

    <div id="app" class="py-24">
        <div class="container mx-auto max-w-6xl px-6 md:px-0 flex">
            <main class="w-4/6">
                @yield ('first-section')
            <aside class="w-2/6 pl-10">
                <div class="w-full h-auto bg-gray-300">

    <script src="{{ asset('js/app.js') }}"></script>
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    "devDependencies": {
        "axios": "^0.19",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    "dependencies": {
        "dayjs": "^1.8.16",
        "lodash": "^4.17.15",
        "tailwindcss": "^1.1.2"

Please sign in or create an account to participate in this conversation.