The Vue CLI created a route configuration for us when we setup our project. So, what about that Navbar? To answer that, we'll detour to our routing, and come back to navigation a bit later. We then add a bit of our own CSS to lay things out a bit better, making sure that it's scoped to our component to avoid accidental style leakage. We'll get to routing details in a moment.Īfter pulling in the Bootstrap JavaScript and CSS, we import our custom Navbar. So if we hit the /about route, the About component's contents will render in the. houses one of our components that matches a route. We will be using vue-router to handle our routing, so we'll preemptively add its component. Our master layout lives our in App’s view. ja for Japanese, along with its name in its own language, and its language direction (left-to-right or right-to-left). We setup each supported locale with its ISO 639-1 code, e.g. src/config/i18n.js export const defaultLocale = 'en' We know we're i18n-izing this puppy, so let's add a single source of truth for our supported locales and the default locale. You can also see the app running live on Heroku. □ Note » You can find the entire codebase for this app on GitHub. Our directory structure can then look like this. We'll just add src/config and src/services directories to house our i18n-specific configuration and libraries, respectively. Thankfully the Vue CLI creates reasonable defaults for us. Once we initialize the project with the Vue CLI, we can set up our project directory structure. The most important ones are in the /build directory and package.json. Here's the commit diff so you can see all the changes. We also upgraded our development dependencies, and when doing so production build scripts had to be updated. □ Note » We upgraded our packages to the ones above.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |