Vue without Build Step

index.html

<!--
  
Code lifted from: 
https://github.com/MicrosoftDocs/mslearn-vue-dynamic-render/blob/main/end/index.html

Course:
https://learn.microsoft.com/en-us/training/modules/vue-dynamic-rendering/3-render-lists-exercise

-->

<div class="nav-bar"></div>
    <h1>Relecloud Galaxy Tours</h1>

    <div id="app">
        <h2>{{ productName }}</h2>
        <div>{{ productDescription }}</div>
        <hr />

        <!-- TODO: Add code to display classes -->
        <div v-for="(productClass, index) in productClasses" :key="index" class="row">
            <div>
                {{ productClass.name }}
            </div>
            <div>
                $ {{ productClass.price.toLocaleString('en-US') }}
            </div>
            
            <!-- More to come -->
            <button v-if="productClass.earlyBird" class="button">Book early bird!</button>
            <button v-else class="button">Book now!</button>

            <div v-show="productClass.seatsAvailable < 10">Almost sold out!</div>
        </div>

        <img v-bind:src="productImage" v-bind:alt="productImageDescription" :style="productImageStyle" />
    </div>

script.js

const app = Vue.createApp({
    data() {
        return {
            productName: 'Book a Cruise to the Moon',
            productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            productImage: 'assets/cruise.jpg',
            productImageDescription: 'An astronaut floats outside the window while you sit in comfort',
            productImageStyle: {
                'border-radius': '15px'
            },
            productClasses: [
                {
                    name: 'Coach',
                    price: 125000,
                    seatsAvailable: 20,
                    earlyBird: true
                },
                {
                    name: 'Business',
                    price: 275000,
                    seatsAvailable: 6,
                    earlyBird: true
                },
                {
                    name: 'First',
                    price: 430000,
                    seatsAvailable: 2,
                    earlyBird: false
                }
            ]
        }
    },
});



app.mount('#app');

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js"></script>

vue-without-build-step.markdown

Vue without Build Step

A Pen by Oliver Schafeld on CodePen.

License.