Vfrdtyky

This semester, I began learning Vue. Our first "assignment" for the Vue phase was to follow along with, and complete, the instruction provided by a YouTube video from Traversy Media. This video was great to follow, evident that I was able to complete its objective with little difficulty. However, I don't feel that I quite understand the relevance of each file within a Vue project, such as index.js, index.html, *.vue.

I've found a few videos which create a component and then utilize that component. However, I feel completely lost when downloading a component, specifically: 'Vue-Accordion' from github to use as my navigation in conjunction with vue-router. The vue-accordion instructions simply state to add specific code, but doesn't say to which file I should add this code.

I've hacked at it by guessing/assuming a file that I figured relevant to the task, such as app.vue, index.js, and index.html... to no avail. Certainly, I think that a better understanding of a Vue Project's file-structure/hierarchy could give me a better feel in knowing exactly what files are relevant to any task-at-hand that I may have.

Alright so schools in session (sorry if I explain too basic stuff at times, just trying to be thorough).

Here's the basic structure for a Vue project using vue init webpack-simple my-project:

• src/
  
  
  
  
  • assets/
    
    
    
    
    • logo.png
    
    
    
    
  
  
  • App.vue
  
  
  • main.js
  
  
  
  


• .babelrc


• .gitignore


• index.html


• package.json


• README.md


• webpack.config.js

The src folder contains all the source files of your project.

The src/assets folder contains all your assets, primarily images.

App.vue is the first "view" of your app.

main.js is the main script of your project where you configure and run Vue. This is where you load anything that should exist in the global scope of your app.

.babelrc configures how the babel tool should syntax check your code.

.gitignore tells Git to ignore certain files from committing.

index.html is the page that's sent to the clients browser. This is where we load the main.js file and put any and all meta data you need (unless you use e.g. vue-meta to handle it there instead). Note that <div id="app"> html tag, this is where all your Vue files get mounted to.

package.json is our npm configuration file. When you run e.g. npm install --save component-from-npm-name it's saved here so you can just run npm install later to get all the dependencies of your project.

README.md is a documentation file in the Markdown language format. It's displayed as the frontpage of your project on e.g. Github or Gitlab.

webpack.config.js is a Node.js file that is responsible for running Webpack on your project. Vue can be used without Webpack but I don't recommend it. You can run node webpack.config.js directly to build your project. This file is your build script, you configured this to handle the build process of your project.

So, armed with this information, lets get to your question.

How do you load a component in Vue.js?

1. Run npm install --save vue-accordion (note that while the source code is hosted on Github, the package is downloaded from here: https://www.npmjs.com/package/vue-accordion)


2. In your index.js file, which is responsible for loading things to your Vue app in the global context, you do as the Github page tells you and first import {vueAccordion} from 'vue-accordion', then run Vue.component('vue-accordion', vueAccordion) to register it in the global context.

That's all there is to it. index.jsis your entry point for your Vue app, while webpack.config.js is your build script.

There is however an alternative solution to loading components. In the previous variant we loaded it in index.js to load it in the global context, i.e. you can use the component now anywhere in your app, but what if you only want to load it on an as-is-needed basis (you'd wanna do this for performance reasons)?

Well, in your App.vue file you have a <script> tag where you can configure things in just that Vue component (all .vue files are Vue components, even if you call them routes, pages, views or whatever to indicated their purpose). In order to load a component not in the global context, but the component context, you'd do the following in App.vue:

<script>

import Accordion from 'vue-accordion';

export default {

    components: {

        'vue-accordion': Accordion

    }

</script>

Tips...

1. This is just one setup for a Vue project. A Vue project can be as simple as just loading Vue as a script to your static index.html file, then you can have a much more annoying setup with regular javascript files, but that's dumb and inefficient. So, a proper project has a Node.js file to run Webpack. Depending on how you configure Webpack your project can act quite differently from any other Webpack project.


2. Read up more on how Webpack works so you can have a project structure that makes sense for you.


3. Take a look at Nuxt, it's essentially a collection of other projects (primarily Vue and Webpack) that simplifies the making of a powerful Vue project. You can sit and set up your own Vue project and all the tools yourself and get the same result, but Nuxt makes it simpler for you to do.