Global components may be enough for many view projects. They can work very well for small to medium-sized applications, where JavaScript is only used to enhance certain views. In more complex projects, however, or when your front end is entirely driven by JavaScript, these disadvantages may arise. Global definitions force unique names for every component.
This means that we cannot have two components called ProductList, even though they are used in different places of the application. String templates lack syntax highlighting. Also, the template elements we learned about in the Components Fundamentals course live in a different file than our components code. This makes it harder to keep track of them.
There is no CSS support. which means that while HTML and JavaScript are modularized into components, CSS is left out. Lastly, there is no build step, and this restricts us to using HTML and ES5 JavaScript rather than preprocessors like Pug and Babel. So, we cannot take advantage of modern JavaScript.
All of these issues are solved. vue extension. This is made possible with build tools such as Webpack or Rollup. In this course, you will learn all you need to know to get started and implement single file components in your applications.
vue. This handsome file has three sections. The template. The script.
and the style. The template is where the markup of the component lives. In the script, the file exports an object which is the options object of the component hello. In the style tag, there are all the CSS rules that are related to styling the component.
See how nicely we can read and edit all aspects of the component in a single file. This way, you don't have to jump between two or three files. to edit the components template, code, and styles, which is a real time saver. view, which is not a proper component name.
As we learned about in the component naming best practices lesson in the component fundamentals course, component names should always be multi-worded. So, Perhaps a better name would be Hello World or Hello There or something like that. Okay, let's move on to the next example. Here we take advantage of preprocessors.
You can see in the template tag that we can use pug or jade to create the component's markup. It is of course optional. You can go with regular HTML if you prefer. In the script tag lives the most exciting part.
Here it uses ES6 to import another component and to export the component object. Also, in the rest of the code, you can see how much nicer the code looks when it's written in modern JavaScript. By the way, if you don't feel confident with ES6, we have a course dedicated to it that will teach you all you need to know to start using modern JavaScript in your code. You can find a link to it in the description below.
Lastly, in the style tag, we use the stylus preprocessor to define the component styles. These specific languages are only examples. You could just as easily use TypeScript as CSS, post-CSS, or whatever other preprocessors help you be more productive. When using Webpack with ViewLoader, you also get first-class support for CSS modules.
That said, it should be clear. that when you are building a single page application or a medium to large JavaScript website, single file components are definitely the way to go.