As we work along with the javascript framework (vue / react) we will realize that there are custom components in our application that you might need to re-use in different applications or sometimes we have to share with the community.
Let’s see how to publish our first component into npm and use it in our project.
In my previous post, I explain how to create a vuejs plugin and use it in our project. In this post I am going to use the same project to publish in npm
In the last blog, I explain how to create and use the library/plugin. Lets recap important things to do before publishing into npm
After we build library/plugin files into dist folder, we have to update our package.json
Let us add the main entry point in packge.json file
"main": "./dist/lib.umd.min.js",
Now let’s whitelist what are the files needed when someone is using them inside their node_modules. Here we need to include only dist folder from our project.
"files": [ "dist/*"],
Pushing compiled source code is the right way to publish in NPM. Users usually won’t edit this code. if they want to make changes, they can fork from version control systems (like Github). In case you want to include all files, we add like below
"files": [
"dist/*",
"src/*",
"folder/*",
],
Let’s add additional details like author details and license also into the package.json
version: the version number of our plugin/library. You will have to increment this number every time you publish an update for your package. usually we follow semantic versioning
private : This means your package is public (i.e. everyone is able to see and install it).
license: license for our package
author: author details
main: The primary entry point to our plugin.
files: specifies which files should be published on NPM.
When Vue 3 was released one of the most exciting features are CompositionAPI. An alternative to Options API. In this article, let’s take a look at how we can use CompositionAPIin our project
Now let’s start by installing Vue CLI globally. If you already have the CLI, make sure your running at least (I am using Vue CLI v5.0.4)
npm install -g vue-cli
We’ll use the Vue CLI to build a simple application( I am using vue3-composition-todo as project name here )
vue create vue3-composition-todo
Here I am selecting default Vue 3
After installation move into the folder and as shown above cd vue3-composition-todo and start-server npm run serve . This will start a development server and we can see it on http://localhost:8080/
Install plugins
Let us install Bootstrap for styles in our project
npm install bootstrap --save
lets import in bootstrap CSS in App.vue (We are using only Bootstrap CSS)
import 'bootstrap/dist/css/bootstrap.css'
Final code in main.js looks like below
import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
createApp(App).mount('#app')
Create UI for TODO
First let’s create a file inside the component TodoList.vue
Inside template, we can do small HTML to show todo list
We have a save function now, after typing on click of saving we call addToDo and push data into our todos object. and the table will re-render and show a new to-do items.
The same way we can add more functionality like removeItem (delete a todo item on click of delete button), toggleCompleted (toggle as completed and in progress) and addTodoForme (adding sample data )
import { reactive } from "vue";
function useTodoList() {
let state = reactive({
newTodo: "",
todos: [
{
id: 1,
title: "Buy groceries for next week",
completed: false,
},
{
id: 2,
title: "Pay credit card bill ",
completed: false,
},
],
});
function addToDo(e) {
e.preventDefault();
state.todos.push({
id: state.todos.length + 1,
title: state.newTodo,
completed: false,
});
state.newTodo = "";
}
function toggleCompleted(item) {
item.completed = !item.completed;
}
function removeItem(item) {
state.todos = state.todos.filter((newItem) => newItem.id !== item.id);
}
function addTodoForme(e) {
e.preventDefault();
const text = `New to do list item with id ${state.todos.length + 1}`;
state.todos.push({
id: state.todos.length + 1,
title: text,
completed: false,
});
}
return {
state,
addToDo,
toggleCompleted,
removeItem,
addTodoForme,
};
}
export default useTodoList;
And final output
Conclusion
Finally, we’ve built our app with Vue 3 Composition API. I hope you learned a few things about Vue 3 and Composition API, Let me know if you have any comments
You can download the full source code from my GitHub repo
In this, I’ll show you how to vue2 composition API.
Let us do a small example todo app with Vue composition API Vue 3 come up with Composition API, in Vue 2, we use The Options API, where we use uses options like data, methods, and mounted. With the Composition API, we have a setup hook in which we write our reactive code and functions. We can re-use the same functions in between components using Composition API, and save a lot of time.
We can install vueCLI and create a new project using vue create vue-composition-api-simple-todo. Please refer to my previous post in case you missed it. Once we create our Vue project open the code base and let’s start with installing @vue/composition-api
Install dependencies
npm i @vue/composition-api --save
Let us take the same HTML from my last past, simple vue todo app Here you can read it if you miss
Let us import @vue/composition-api and use it main.js
import CompositionApi from '@vue/composition-api'
Vue.use(CompositionApi)
Start with coding
Full code of main.js looks like below
import Vue from 'vue'
import App from './App.vue'
import CompositionApi from '@vue/composition-api'
Vue.config.productionTip = false
Vue.use(CompositionApi)
new Vue({
render: h => h(App),
}).$mount('#app')
Let us create a new folder for composable functions
We can define Todos list in composable function like below
import { reactive } from "@vue/composition-api";
function useTodoList() {
let state = reactive({
newTodo: "",
todos: [
{
id: 1,
title: "Buy groceries for next week",
completed: false,
},
{
id: 2,
title: "Pay credit card bill ",
completed: false,
},
],
});
return {
state,
};
}
export default useTodoList
We use the same date, in composition functions, we will define state using Reactivity API, e.g. ref() and reactive(), that allows us to directly create reactive state, computed state, and watchers. In this example, we use reactive to define the state and now we can use todos inside out template.
in components/TodoList.vue we can import composable function
Let’s make a simple vue project example with a TODO list
Setup and Installation
There are two ways to set up Vue: through a VueCLI, or by including a script inside of your HTML file. Let’s do with VueCLI, We can install vue vueCLI globally
npm install -g @vue/cli or yarn global add @vue/cli
Once install complete, let’s create a project by using the below comment
vue create vue-simple-todo
Lets select Vue 2 for this example
Lets select Vue 2 for this example and click enter
Then it will ask for package manager ( Here i am going with npm in this case)
Here is my final screenshot after completing project stup
Now as mentioned there we can cd into folder and start server
npm run serve
Now server will run on http://localhost:8080/. We can open a browser and see basic vue template in browser
deafault vue page
Now let’s take a look on codebase (I am using VS Code for editing files)
We can see App.vue and components folder below
Let’s start our coding 🙂
Let’s start with some cleanup, remove HelloWorld.vue from components, and create a new file TodoList.vue
Now We can define data inside vue class, and move HTML labels from template to todos variable inside data. Here we define our todo list variable and assign some values.
Let’s add the click functionality for the save button, We can add methods below data() add functionality as below. Finally, we will clear newTodo once we added to the current list. On the template, we call this method on the save button as below
