![]() However, even though we are mounting to a specific element we still need v-scope. This is a more obvious need when you use an alternate installation approach where you don't have to mount Vue to a specific element. The docs state that the purpose of v-scope is "to mark regions on the page that should be controlled by Petite Vue". This is a very important step that you should not miss. The last thing we want to do is add the v-scope attribute to the multi-step-form. ![]() Then, just like with a typical Vue app, we need to mount it to a particular DOM element. It just feels more natural that way coming from typical build environments. The reason I chose the ES Modules route, is so that I could load it directly into a dedicated JavaScript file where I'd be doing all the JS work. You can check browser compatibility for ES Modules on and if needed you can use one of the other installation methods described in the Petite Vue repo. Then you can install it via a CDN with a script tag or you can install it via a CDN using the ES Module build, which is what I did. Notice I've included Tailwind CSS and Daisy UI to provide us some nice looking styles for us, so I don't have to think about making it look good. In order to work with Petite Vue all you need is an HTML file, no build step required. You can also checkout a live interactive version here on codesandbox.Īlright, let's get started! Initializing and Mounting Vue Here's a look at what we're going to build. So let's get our hands dirty and start playing around with Petite Vue! And what better way to practice than with a common real world scenario on mostly static sites: a multi-step form! There are probably bugs and there might still be API changes, so use at your own risk. In the words of the README from the Petite Vue repo: This means it's probably not something you want to jump into using on a million dollar production project just yet but it's still worth getting familiar with. In fact, Evan just announced it on twitter last month. In other words, it's very well suited to the specified task but still developer friendly for those of us accustomed to working with Vue! Current StatusĪt the time I'm writing this article, August 6, 2021, Petite Vue is still very new. Instead it mutates the already existing DOM. In other words, it doesn't override existing DOM with markup from a template. It feels mostly like writing normal Vue.Petite Vue is an alternative distribution of Vue.js made specifically for sprinkling in islands of interactivity on mostly content driven websites and boasts a number of benefits: Now Evan You (founder of Vue.js) has made an even lighter weight version of Vue made specifically for this use case. In other words, your whole site could be mostly static or server side rendered and you could just add in Vue here and there where some extra interactivity was needed. Vue on the other hand has always had the ability to be adopted incrementally. Are you building an informational website with primarily static content? If so a lot of JavaScript frameworks are probably overkill. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |