Skip to main content

Intro to VueJS

Morning Javascript Activity (20 min)

  • JS Warmup Gist
    • Refresh on variables
    • Use some conditionals and methods
    • Ask questions and review docs if you get stuck
    • You’re not expected to finish all of this in 20 minutes

Frontend Frameworks

What’s the difference between Vue and Nuxt?

  • Nuxt is built using Vue. It is a Vue Framework that offers a lot of functionality built into it
  • Vue is the essential core of Nuxt, just like React is the essential core of Next
  • Nuxt provides project organization, build tool setup, and an easy way to handle modules and plugins, it also offers static site generation out of the box

Project Setup Walkthrough

  • Documentation
    • install command npm init vue@latest
    • Tip: Don’t install eslint and prettier at this step. you’ll understand what’s happening better if you work through it separately.
    • You don’t need typescript in this course
    • Add the router

Activity: Set up a basic vue install and edit files (20 minutes)

  • Install vue as we did in the demo
  • Edit html in the template tags
  • Add html to the App.vue file as well as the HomeView.vue file
    • Take now of how the content is organized
  • Add css into the <style scoped> tags of each page

Formatting and Linting Configuration

  • Use the Volar Extension
  • Check the Readme in the f22 repo utils branch for tutorials on setting up prettier and eslint with vue, vite, and tailwind.

Anatomy of a Single File Component

<script setup>

// Write Javascript here

</script>


<!-- Write HTML here -->



<style scoped>

/* Write CSS here */

<style>
  • All 3 are not always required.
  • using style scoped, you can keep your css variables bound at the component level, which increases modularity of your code
  • You can rearrange the tags in any order.

Vue Directives Basics

  • Vue has a set of templating directives that you can use to add content to a web page. There are lots and they are all useful for different things. Today we will cover a couple basics to get you started
  • Directives List

v-bind

  • This is one of the most important. it allows you to bind data to html properties such as src in an img tag
  • You can also use it to bind styles v-bind css
  • It can be written out as v-bind:src="variableName" or by using the shorthand : as in :src="variableName
  • Example:
<img :src="cat.photo" :alt="cat.description" />

Binding Styles

  • You can also bind classes!
  • Make content visible/invisible based on specific parameters
<p :class="answer == !answer ? 'text-red-500' : 'text-green-500'" class="text-xl">This is some text</p>
  • In this example, if the variable “answer” was false, then the text would be red, otherwise it would be green

Vue Composition API vs Options API

  • When you look up Vue documentation and examples, you’ll find two distinct types of syntax being used. One is the options api and the other is the composition api.
  • The Options API is older and will be eventually replaced by the composition api
  • They are both useful ways of structuring the logic for your code. They handle your variables, functions, and props.
  • API Reference Appendix
  • In this class we will default to the composition api

Comparative Example

  • Options API
<script>
export default {
  data() {
    variableKey: 'Variable Value'
  }
}
</script>
  • Composition API
<script setup>
const variableKey = 'Variable Value'
</script>

Lab Time

  • Create javascript variables just like we did this morning in the <script setup></script> tags of one of the pages
  • Use v-bind syntax from class to render your variables on the page
  • Use Conditionals to change the css of something on a page
  • Manipulate the variables with JS to render them differently
  • Add tailwind and style your content
  • Configure prettier and eslint as per the notes in the utils branch

Homework